2012-09-26 5 views
25

Nella mia vista sono presenti un elenco di elenchi ul collegati che utilizzano un'interfaccia utente jQuery: Direttiva ordinabile per facilitare il trascinamento e il rientro degli elementi dell'elenco.Angular.js: è possibile eseguire il re-rendering di ng-ripetizioni in base ai dati di ambito esistenti?

Modifiche faccio tramite drag di jQuery UI e rilasciare applico al $scope utilizzando la funzione $apply, questa parte funziona ...

L'edizione che sto funzionando in ora però è che il calo in alcune di queste liste che fornisco un modulo personalizzato che l'utente deve compilare.

L'utente ha la possibilità di:

  1. compilare il modulo e continuare, che poi fa il $apply chiamata a persiste i dati nel $scope
  2. fare clic su un pulsante Annulla che invece di chiamare il $apply per archiviare le informazioni, è necessario ripristinare l'ultima interazione di trascinamento/rilascio in modo efficace 're-rendering' tutte le mie liste per riflettere i dati che sono ancora nello $scope in questa fase (poiché l'ultima resistenza non aveva ancora avuto alcun effetto su di esso).

L'effetto di questo pulsante "annulla" ripristina efficacemente tutto fino al punto prima che l'utente abbia raccolto l'elemento dell'elenco e lo abbia trascinato in un altro elenco.

Come posso forzare un 'aggiornamento' o 're-rendering' dei miei ng-repeat s in modo che vengano visivamente aggiornati e mostrino di nuovo i dati correnti di $scope?

+3

In genere, la modifica del modello dati ($ scope) funzionerà, se eseguita all'interno di AngularJS. Se fatto fuori, chiamare $ scope. $ Apply() dovrebbe attivare l'aggiornamento/aggiornamento. Alla fine delle tue manipolazioni di annullamento, stai chiamando $ scope. $ Apply() o avvolgendo le tue modifiche in $ scope. $ Apply (function() {... changes here ...})? –

+0

In effetti sto chiamando '$ scope.apply()' dalla direttiva basata su jQuery ma non sembra forzare un ricaricamento/re-rendering dei dati esistenti. Probabilmente perché Angular pensa che tutto sia esattamente lo stesso, non sapendo di aver fatto la manipolazione DOM senza dirlo a riguardo. Quindi quello di cui ho veramente bisogno è solo un tipo di chiamata di "force refresh", dove Angular indipendentemente dallo stato di '$ scope' impone solo un aggiornamento dei suoi dati renderizzati. – Jannis

+0

Bene, come soluzione alternativa, cosa succede se rimuovi l'oggetto trascinato da $ scope all'interno della tua chiamata a $ scope. $ Apply() - Angular dovrebbe vederlo e rerender - quindi sulla riga successiva (ancora dentro il tuo $ scope . $ apply() call) aggiungilo di nuovo usando $ timeout(): '$ timeout (function() {... aggiungi elemento rimosso di nuovo a $ scope qui ...});' La manipolazione $ scope che esegui in la funzione $ timeout dovrebbe causare il verificarsi di un secondo rendering. –

risposta

22

Quando l'utente avvia la compilazione del modulo, vorrei impostare

$scope.oldData = angular.copy($scope.data);

Allora all'utente di modificare $ scope.data utilizzando il modulo come gli piace.

Quindi, se l'utente preme Annulla, è sufficiente impostare $scope.data = $scope.oldData.

+0

Ho usato in questo modo, ma ho dovuto chiamare $ applicare due volte; scope.oldData = angular.copy (scope.irs); scope.irs.length = 0; Ambito . $ Apply(); scope.irs = scope.oldData; Ambito .applicare $(); –

+0

È un'ottima soluzione. Mi ha aiutato a innescare un re-rendering di una ng-repeat in cui i dati stessi non erano cambiati, ma dovevano essere ri-resi con forza. Ho fatto solo $ scope.data [0] = angular.copy ($ scope.data [0]); invece di copiare l'intero array. Sarebbe bello sapere se esiste una funzione angularjs per questo re-rendering dei trigger; –

+2

Per impostazione predefinita, angular traccerà se un elemento ng-repeat deve essere rieseguito inserendo una variabile '$$ hashKey' su ciascun oggetto nel ripetitore. Se '$$ hashKey' cambia su uno degli indici, lo rende nuovamente. Un hashKey potrebbe cambiare attraverso un elemento in movimento nella matrice, rimosso o aggiunto uno nuovo. Puoi dire angolare quale proprietà tracciare per vedere se dovrebbe re-render facendo 'ng-repeat =" item in items track by item.id "" o simili - quindi se 'item.id' cambia in un indice, sarà re-render. –

Problemi correlati