2014-12-02 29 views
5

Sto sviluppando una dashboard con widget ordinabili, agganciabili e mobili. Uno dei controlli che sto utilizzando genera i widget mobili come HTML nella parte inferiore del DOM, prima del tag di chiusura body. Ciò rimuove efficacemente le azioni eseguite nei controlli finestra dall'ambito del controller in cui sono generate.Come aggiornare manualmente la vista AngularJS usando la sintassi ControllerAs?

Sto sviluppando questo controller dashboard utilizzando la sintassi controllerAs disponibile, ma non riesco a capire come aggiornare effettivamente la vista con questa sintassi quando un componente esterno esegue un'azione che influisce sui dati per la vista?

Nota: questo non è l'unico problema che mi spinge ad aggiornare manualmente la vista principale. Ci sono anche direttive altrove nella pagina che eseguono azioni che hanno un impatto sulla vista.

Idealmente, non avrei mai dovuto aggiornare la vista manualmente, perché avrei usato tutti i comandi che si verificano all'interno dei comandi Angular incorporati che influenzano il ciclo di digest, ma questa non era un'opzione per me.

Quindi ... se stavo usando $scope sarei in grado di fare semplicemente:

$scope.$digest 

O

$scope.$apply 

Ma come faccio a ottenere lo stesso effetto utilizzando controllore come?

var vm = this; 
vm.array = [item, item]; 
vm.something = something; 

//External something changes something on a vm.variable 

vm.update! //How?? 

risposta

6

Con "come" si sta definendo il modo in cui si farà riferimento all'ambito del controllore nella propria vista.

Quindi questo:

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
</body> 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

è uguale a questo:

<body ng-controller="MainCtrl as main"> 
    <p>Hello {{main.name}}!</p> 
</body> 

Il controller:

app.controller('MainCtrl', function($scope) { 
    this.name = 'World'; 
}); 

DEMO

Quindi, in pratica si dovrebbe essere in grado t o chiama this.$digest o this.$apply come faresti su $scope.

UPDATE

Dopo aver fatto qualche ricerca, penso che la soluzione corretta dovrebbe usare $scope.apply() o $scope.digest().

risorsa principale:
AngularJS’s Controller As and the vm Variable
C'è a comment aumento tua stessa domanda e l'autore di replay:

You can use $scope.$apply() in that case and just inject $scope for that purpose (still using vm for everything else). However, if you switch fro using ajax to using Angular's $http, then you won't need to call $apply as angular's $http does that for you. That's what I recommend

Altre risorse che ho trovato:

+0

Usando 'var vm = this; 'e quindi' vm. $ digest(); 'provoca un errore:' L'oggetto non supporta la proprietà o il metodo '$ digest''. – Blunderfest

+1

Penso che sia necessario usare '$ scope. $ Digest()' o '$ scope. $ Apply()' in questo caso. Dai un'occhiata a [questo articolo] (http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-withwith-sugar/) dove spiega l'iniezione '$ scope' – pasine

+0

Ho letto questo articolo prima e penso che menzioni specificamente l'iniezione di $ scope in riferimento a orologi o trasmissioni, il che mi fa pensare che ci possa essere un modo per applicare gli aggiornamenti senza scopo. Ci dovrebbe essere comunque. – Blunderfest

0

cercare di fare l'aggiornamento a $ portata $ applicare blocco in questo modo:.

$scope.apply(function() { 
    vm.something = some_new_value; 
}); 

Per evitare "Digest già in corso" l'errore, avvolgere che in $timeout

Problemi correlati