2013-03-28 9 views
25

Fondamentalmente voglio l'equivalente al binding per gli eventi "aggiungi" e "rimuovi" nelle raccolte Backbone. Non vedo praticamente alcun modo di farlo in AngularJS, e l'attuale soluzione alternativa per cui ci siamo stabiliti è $watch() nell'array length e differisce/ricalcola manualmente l'intera operazione. E 'davvero questo che fanno i bei ragazzi?Come guardare un array per modifiche in AngularJS

Modifica: in particolare, osservare la lunghezza dell'array significa che non so facilmente quale elemento è stato modificato, ho bisogno di "diff" manualmente.

+1

C'è qualcosa di specifico che desideri fare? Cosa c'è di sbagliato con $ guardando la lunghezza dell'array? – ganaraj

+0

@ganaraj Modificato, voglio solo sapere quale elemento è stato modificato – abyx

+0

L'associazione dati di Angular funziona come gli eventi; quello che devi fare è cambiare il modo in cui stai pensando. Perché hai davvero bisogno di saperlo? –

risposta

11

Il modo per guardare un array in angolare è $watch(array, function(){} ,true)

+0

Questo è un orologio profondo. Probabilmente non ne hai bisogno nella maggior parte dei casi. – ganaraj

+2

@ Jason Als: Grazie, ma questo non mi dice quale elemento è stato rimosso/aggiunto.Ho modificato la domanda per renderlo più chiaro :) – abyx

+0

@ganaraj effettivamente lo fai, vedi il mio commento sulla domanda dell'op –

0

Informi di più sul tuo caso d'uso. Una delle soluzioni di elemento di monitoraggio persistenza sta usando direttiva ngRepeat alla direttiva personalizzati che l'ascolto elemento di $ distruggere evento:

<div ng-repeat="item in items" on-delete="doSomething(item)"> 

angular.module("app").directive("onDelete", function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.on("$destroy", function() { 
       scope.$eval(attrs.onDelete); 
      }); 
     } 
    } 
}); 
+0

Questo è bello, ma non mi sento come rendere il mio MVC legarsi agli elementi nella vista per sapere quando qualcosa nel mio il modello è cambiato è la strada giusta da fare ...? – abyx

+0

Sì. Un'altra soluzione è la creazione di classi Model e Collection come in Backbone. –

0

Forse la soluzione è quella di creare la classe di raccolta (come spina dorsale fa) e si può agganciare in eventi abbastanza facilmente pure.

La soluzione che ho fatto qui non è davvero completa, ma dovrebbe darti una guida generale su come questo potrebbe essere fatto, forse.

http://beta.plnkr.co/edit/dGJFDhf9p5KJqeUfcTys?p=preview

3

vorrei creare ambiti figlio e guardarli singolarmente. Ecco un esempio:

$scope.myCollection = []; 
var addChild = function() 
{ 
    var Child = $scope.$new(); 
    Child.name = 'Your Name here'; 

    Child.$watch('name', function(newValue) { 
    // .... do something when the attribute 'name' is changed ... 
    }); 

    Child.$on('$destroy', function() { 
    //... do something when this child gets destroyed 
    }); 


    $scope.myCollection.push(Child); // add the child to collection array 

}; 

// Pass the item to this method as parameter, 
// do it within an ngRepeat of the collection in your views 
$scope.deleteButtonClicked = function(item) 
{ 
    var index = $scope.myCollection.indexOf(item); //gets the item index 
    delete $scope.myCollection[index]; // removes the item on the array 
    item.$destroy(); // destroys the original items 
} 
29

Penso che utilizzando $watch è una buona soluzione, ma $watchCollection può essere meglio per voi. $watchCollection non esegue il confronto approfondito e osserva solo la modifica dell'array come inserire, eliminare o ordinare (non l'aggiornamento articolo).

Per exemple, se si vuole mantenere un attribut order sincronizzare con l'ordine matrice:

$scope.sortableItems = [ 
    {order: 1, text: 'foo'}, 
    {order: 2, text: 'bar'}, 
    {order: 3, text: 'baz'} 
]; 

$scope.$watchCollection('sortableItems', function(newCol, oldCol, scope) { 
    for (var index in newCol) { 
     var item = newCol[index]; 
     item.order = parseInt(index) + 1; 
    } 
}); 

Ma per il vostro problema, non so se c'è una soluzione migliore rispetto scorrere manualmente la matrice per identificare il cambiamento.

Problemi correlati