Cette question est ancienne mais j'ai eu du mal pendant longtemps à essayer d'obtenir une réponse à ce problème qui répondrait à mes besoins et ne l'a pas facilement trouvée. Je crois que ma solution suivante est bien meilleure que celle actuellement acceptée, peut-être parce que angular a ajouté des fonctionnalités depuis que cette question a été posée à l'origine.
Réponse courte, l'utilisation de la méthode Module.value vous permet de transmettre des données à un constructeur de contrôleur.
Voir mon plongeur ici
Je crée un objet modèle, puis je l'associe au contrôleur du module, en le référençant avec le nom «modèle»
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>
Le constructeur de mon contrôleur accepte alors un paramètre avec le même identifiant «modèle» auquel il peut alors accéder.
Manette
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Remarques:
J'utilise l'initialisation manuelle du bootstrap , ce qui me permet d'initialiser mon modèle avant de l'envoyer en angulaire. Cela fonctionne beaucoup mieux avec le code existant, car vous pouvez attendre de configurer vos données pertinentes et de compiler le sous-ensemble angulaire de votre application à la demande lorsque vous le souhaitez.
Dans le plunker, j'ai ajouté un bouton pour alerter les valeurs de l'objet modèle initialement défini en javascript et passé à angular, juste pour confirmer que angular fait vraiment référence à l'objet modèle, plutôt que de le copier et de travailler avec une copie.
Sur cette ligne:
module.controller('MyController', ['model', MyController]);
Je passe l'objet MyController dans la fonction Module.controller, plutôt que de le déclarer en tant que fonction inline. Je pense que cela nous permet de définir beaucoup plus clairement notre objet contrôleur, mais la documentation angulaire a tendance à le faire en ligne, donc j'ai pensé qu'elle méritait des éclaircissements.
J'utilise la syntaxe "controller as" et j'assigne des valeurs à la propriété "this" de MyController, plutôt que d'utiliser la variable "$ scope". Je pense que cela fonctionnerait aussi bien en utilisant $ scope, l'affectation du contrôleur ressemblerait alors à ceci:
module.controller('MyController', ['$scope', 'model', MyController]);
et le constructeur du contrôleur aurait une signature comme celle-ci:
function MyController ($scope, model) {
Si pour une raison quelconque vous vouliez, vous pouvez également attacher ce modèle en tant que valeur d'un deuxième module, que vous attachez ensuite en tant que dépendance à votre module principal.
Je pense que sa solution est bien meilleure que celle actuellement acceptée car
- Le modèle transmis au contrôleur est en fait un objet javascript, pas une chaîne qui est évaluée. Il s'agit d'une véritable référence à l'objet et ses modifications affectent les autres références à cet objet modèle.
- Angular dit que l'utilisation de ng-init dans la réponse acceptée est une mauvaise utilisation, ce que cette solution ne fait pas.
La façon dont Angular semble fonctionner dans la plupart des autres exemples que j'ai vus a le contrôleur définissant les données du modèle, ce qui n'a jamais eu de sens pour moi, il n'y a pas de séparation entre le modèle et le contrôleur, cela ne semble pas vraiment MVC pour moi. Cette solution vous permet d'avoir vraiment un objet modèle complètement séparé que vous passez dans le contrôleur. Notez également que si vous utilisez la directive ng-include, vous pouvez mettre tout votre code HTML angulaire dans un fichier séparé, séparant complètement votre vue de modèle et votre contrôleur en pièces modulaires distinctes.