Этот вопрос старый, но я долго пытался найти ответ на эту проблему, который бы работал для моих нужд, и мне было нелегко его найти. Я полагаю, что мое следующее решение намного лучше, чем принятое в настоящее время, возможно, потому что angular добавил функциональность, так как этот вопрос был первоначально поставлен.
Краткий ответ, используя метод Module.value, позволяет передавать данные в конструктор контроллера.
Смотрите мой плункер здесь
Я создаю объект модели, затем связываю его с контроллером модуля, ссылаясь на него с именем «модель»
HTML / JS
<html>
<head>
<script>
var model = {"id": 1, "name":"foo"};
$(document).ready(function(){
var module = angular.module('myApp', []);
module.value('model', model);
module.controller('MyController', ['model', MyController]);
angular.bootstrap(document, ['myApp']);
});
function confirmModelEdited() {
alert("model name: " + model.name + "\nmodel id: " + model.id);
}
</script>
</head>
<body >
<div ng-controller="MyController as controller">
id: {{controller.model.id}} <br>
name: <input ng-model="controller.model.name"/>{{controller.model.name}}
<br><button ng-click="controller.incrementId()">increment ID</button>
<br><button onclick="confirmModelEdited()">confirm model was edited</button>
</div>
</body>
</html>
Затем конструктор в моем контроллере принимает параметр с тем же идентификатором «модель», к которому он затем может получить доступ.
контроллер
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Ноты:
Я использую ручную инициализацию начальной загрузки , которая позволяет мне инициализировать мою модель перед отправкой в angular. Это гораздо лучше работает с существующим кодом, так как вы можете подождать, чтобы настроить соответствующие данные и скомпилировать только угловое подмножество вашего приложения, когда вы этого хотите.
В планере я добавил кнопку для оповещения о значениях объекта модели, который был первоначально определен в javascript и передан в angular, просто чтобы подтвердить, что angular действительно ссылается на объект модели, а не копирует его и работает с копией.
На этой линии:
module.controller('MyController', ['model', MyController]);
Я передаю объект MyController в функцию Module.controller, а не объявляю его как встроенную функцию. Я думаю, что это позволяет нам гораздо более четко определять наш объект контроллера, но документация Angular стремится сделать это встроенным, поэтому я подумал, что это требует разъяснений.
Я использую синтаксис «controller as» и присваиваю значения свойству «this» в MyController, а не переменную «scope». Я считаю, что это будет работать нормально, используя $ scope точно так же, назначение контроллера будет выглядеть примерно так:
module.controller('MyController', ['$scope', 'model', MyController]);
и конструктор контроллера будет иметь такую подпись:
function MyController ($scope, model) {
Если по какой-либо причине вы захотите, вы также можете присоединить эту модель в качестве значения второго модуля, который вы затем присоедините в качестве зависимости к первичному модулю.
Я считаю, что его решение намного лучше, чем в настоящее время принято, потому что
- Модель, передаваемая в контроллер, на самом деле является объектом javascript, а не строкой, которая оценивается. Это истинная ссылка на объект, и изменения в нем влияют на другие ссылки на этот объект модели.
- Angular говорит, что использование ng-init принятого ответа является неправильным использованием, чего не делает это решение.
В большинстве других примеров, которые я видел, похоже, работает Angular, когда контроллер определяет данные модели, что для меня никогда не имело смысла, нет разделения между моделью и контроллером, что на самом деле не выглядит MVC для меня. Это решение позволяет вам действительно иметь совершенно отдельный объект модели, который вы передаете в контроллер. Также следует отметить, что если вы используете директиву ng-include, вы можете поместить все ваши угловые html в отдельный файл, полностью разделив представление модели и контроллер на отдельные модульные части.