Diese Frage ist alt, aber ich hatte lange Mühe, eine Antwort auf dieses Problem zu finden, die für meine Bedürfnisse geeignet war, und fand sie nicht leicht. Ich glaube, meine folgende Lösung ist viel besser als die derzeit akzeptierte, vielleicht weil Angular die Funktionalität hinzugefügt hat, seit diese Frage ursprünglich gestellt wurde.
Mit der kurzen Antwort können Sie mithilfe der Module.value-Methode Daten an einen Controller-Konstruktor übergeben.
Sehen Sie meinen Plunker hier
Ich erstelle ein Modellobjekt, ordne es dann dem Controller des Moduls zu und verweise es mit dem Namen 'model'.
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>
Der Konstruktor in meinem Controller akzeptiert dann einen Parameter mit demselben Bezeichner 'model', auf den er dann zugreifen kann.
Regler
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Anmerkungen:
Ich verwende die manuelle Initialisierung des Bootstrapings , mit der ich mein Modell initialisieren kann, bevor ich es an Angular sende. Dies funktioniert viel besser mit vorhandenem Code, da Sie warten können, bis Sie Ihre relevanten Daten eingerichtet haben, und die eckige Teilmenge Ihrer App nur bei Bedarf kompilieren können, wenn Sie möchten.
Im Plunker habe ich eine Schaltfläche hinzugefügt, um die Werte des Modellobjekts zu warnen, das ursprünglich in Javascript definiert und an Angular übergeben wurde, um zu bestätigen, dass Angular wirklich auf das Modellobjekt verweist, anstatt es zu kopieren und mit einer Kopie zu arbeiten.
In dieser Zeile:
module.controller('MyController', ['model', MyController]);
Ich übergebe das MyController-Objekt an die Module.controller-Funktion, anstatt es als Inline-Funktion zu deklarieren. Ich denke, dies ermöglicht es uns, unser Controller-Objekt viel klarer zu definieren, aber die Angular-Dokumentation tendiert dazu, dies inline zu tun, sodass ich dachte, dass es einer Klärung bedarf.
Ich verwende die Syntax "controller as" und weise der Eigenschaft "this" von MyController Werte zu, anstatt die Variable "$ scope" zu verwenden. Ich glaube, dass dies mit $ scope genauso gut funktionieren würde. Die Controller-Zuweisung würde dann ungefähr so aussehen:
module.controller('MyController', ['$scope', 'model', MyController]);
und der Controller-Konstruktor hätte eine Signatur wie diese:
function MyController ($scope, model) {
Wenn Sie aus irgendeinem Grund möchten, können Sie dieses Modell auch als Wert eines zweiten Moduls anhängen, das Sie dann als Abhängigkeit zu Ihrem primären Modul anhängen.
Ich glaube, seine Lösung ist viel besser als die derzeit akzeptierte, weil
- Das an den Controller übergebene Modell ist eigentlich ein Javascript-Objekt, keine Zeichenfolge, die ausgewertet wird. Es ist eine echte Referenz auf das Objekt, und Änderungen daran wirken sich auf andere Referenzen auf dieses Modellobjekt aus.
- Angular sagt, dass die Verwendung von ng-init durch die akzeptierte Antwort ein Missbrauch ist, den diese Lösung nicht tut.
Die Art und Weise, wie Angular in den meisten anderen Beispielen zu funktionieren scheint, hat dazu geführt, dass der Controller die Daten des Modells definiert, was für mich nie sinnvoll war. Es gibt keine Trennung zwischen dem Modell und dem Controller, die nicht wirklich so aussieht MVC für mich. Mit dieser Lösung können Sie wirklich ein völlig separates Modellobjekt haben, das Sie an die Steuerung übergeben. Wenn Sie die Direktive ng-include verwenden, können Sie auch alle Ihre eckigen HTML-Dateien in einer separaten Datei ablegen und so Ihre Modellansicht und Ihren Controller vollständig in separate modulare Teile aufteilen.