Esta pregunta es antigua, pero luché durante mucho tiempo tratando de obtener una respuesta a este problema que funcionara para mis necesidades y no la encontré fácilmente. Creo que mi siguiente solución es mucho mejor que la actualmente aceptada, quizás porque angular ha agregado funcionalidad desde que esta pregunta se planteó originalmente.
Respuesta corta, el uso del método Module.value le permite pasar datos a un constructor de controladores.
Mira mi saqueador aquí
Creo un objeto modelo, luego lo asocio con el controlador del módulo, haciendo referencia al nombre 'modelo'
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>
El constructor en mi controlador acepta un parámetro con ese mismo identificador 'modelo' al que luego puede acceder.
Controlador
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Notas:
Estoy usando la inicialización manual de bootstrapping , que me permite inicializar mi modelo antes de enviarlo a angular. Esto funciona mucho mejor con el código existente, ya que puede esperar para configurar sus datos relevantes y solo compilar el subconjunto angular de su aplicación cuando lo desee.
En el plunker, agregué un botón para alertar los valores del objeto modelo que se definió inicialmente en JavaScript y se pasó a angular, solo para confirmar que angular realmente hace referencia al objeto modelo, en lugar de copiarlo y trabajar con una copia.
En esta línea:
module.controller('MyController', ['model', MyController]);
Estoy pasando el objeto MyController a la función Module.controller, en lugar de declarar como una función en línea. Creo que esto nos permite definir mucho más claramente nuestro objeto controlador, pero la documentación angular tiende a hacerlo en línea, así que pensé que debería aclararse.
Estoy usando la sintaxis "controlador como" y asignando valores a la propiedad "this" de MyController, en lugar de usar la variable "$ scope". Creo que esto también funcionaría bien usando $ scope, la asignación del controlador se vería así:
module.controller('MyController', ['$scope', 'model', MyController]);
y el constructor del controlador tendría una firma como esta:
function MyController ($scope, model) {
Si por alguna razón quisiera, también podría adjuntar este modelo como un valor de un segundo módulo, que luego adjuntará como una dependencia a su módulo primario.
Creo que su solución es mucho mejor que la actualmente aceptada porque
- El modelo pasado al controlador es en realidad un objeto javascript, no una cadena que se evalúa. Es una verdadera referencia al objeto y sus cambios afectan otras referencias a este objeto modelo.
- Angular dice que el uso de ng-init de la respuesta aceptada es un mal uso, lo que esta solución no hace.
La forma en que Angular parece funcionar en la mayoría de los otros ejemplos que he visto hace que el controlador defina los datos del modelo, lo que nunca tuvo sentido para mí, no hay separación entre el modelo y el controlador, eso realmente no parece MVC para mi. Esta solución le permite realmente tener un objeto modelo completamente separado que pasa al controlador. Además, si utiliza la directiva ng-include, puede colocar todos sus html angulares en un archivo separado, separando completamente la vista del modelo y el controlador en piezas modulares separadas.