Questa domanda è vecchia ma ho lottato a lungo cercando di ottenere una risposta a questo problema che avrebbe funzionato per le mie esigenze e non lo trovasse facilmente. Credo che la mia seguente soluzione sia molto migliore di quella attualmente accettata, forse perché angolare ha aggiunto funzionalità da quando questa domanda è stata posta inizialmente.
Risposta breve, l'utilizzo del metodo Module.value consente di passare i dati a un costruttore di controller.
Vedi il mio plunker qui
Creo un oggetto modello, quindi lo associo al controller del modulo, facendo riferimento a esso con il nome "modello"
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>
Il costruttore nel mio controller accetta quindi un parametro con lo stesso identificatore "modello" a cui può accedere.
controllore
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Appunti:
Sto usando l'inizializzazione manuale del bootstrap , che mi consente di inizializzare il mio modello prima di inviarlo ad angolare. Questo si gioca molto più bene con il codice esistente, poiché puoi aspettare di impostare i dati pertinenti e compilare il sottoinsieme angolare dell'app su richiesta quando vuoi.
Nel plunker ho aggiunto un pulsante per avvisare i valori dell'oggetto modello inizialmente definiti in javascript e passati ad angolare, solo per confermare che angolare fa veramente riferimento all'oggetto modello, piuttosto che copiarlo e lavorare con una copia.
Su questa linea:
module.controller('MyController', ['model', MyController]);
Sto passando l'oggetto MyController nella funzione Module.controller, piuttosto che dichiarare come una funzione in linea. Penso che questo ci consenta di definire in modo molto più chiaro il nostro oggetto controller, ma la documentazione angolare tende a farlo in linea, quindi ho pensato che portasse chiarimenti.
Sto usando la sintassi "controller as" e assegnando i valori alla proprietà "this" di MyController, anziché utilizzare la variabile "$ scope". Credo che funzionerebbe bene usando $ scope allo stesso modo, l'assegnazione del controller sarebbe quindi simile a questa:
module.controller('MyController', ['$scope', 'model', MyController]);
e il costruttore del controller avrebbe una firma come questa:
function MyController ($scope, model) {
Se, per qualsiasi motivo, volessi, puoi anche collegare questo modello come valore di un secondo modulo, che poi aggiungi come dipendenza al tuo modulo principale.
Credo che la sua soluzione sia molto migliore di quella attualmente accettata perché
- Il modello passato al controller è in realtà un oggetto javascript, non una stringa che viene valutata. È un vero riferimento all'oggetto e le modifiche ad esso influiscono su altri riferimenti a questo oggetto modello.
- Angular afferma che l'uso della risposta accettata di ng-init è un uso improprio, cosa che questa soluzione non ha.
Il modo in cui Angular sembra funzionare nella maggior parte degli altri esempi che ho visto ha il controller che definisce i dati del modello, il che non ha mai avuto senso per me, non c'è separazione tra il modello e il controller, che in realtà non sembra MVC per me. Questa soluzione ti consente di avere davvero un oggetto modello completamente separato che passi nel controller. Inoltre, se usi la direttiva ng-include puoi mettere tutto il tuo html angolare in un file separato, separando completamente la vista del modello e il controller in pezzi modulari separati.