W moim zakresie jest tablica obiektów, chcę oglądać wszystkie wartości każdego obiektu.
To jest mój kod:
function TodoCtrl($scope) {
$scope.columns = [
{ field:'title', displayName: 'TITLE'},
{ field: 'content', displayName: 'CONTENT' }
];
$scope.$watch('columns', function(newVal) {
alert('columns changed');
});
}
Ale kiedy modyfikuję wartości, np. Zmieniam TITLE
na TITLE2
, alert('columns changed')
nigdy nie pojawił się.
Jak głęboko obserwować obiekty w tablicy?
Istnieje demo na żywo: http://jsfiddle.net/SYx9b/
angular.equals
gdy trzeci argument przyjmuje wartość logiczną ?$watchCollection
$watchCollection
będzie oglądać tylko „pierwszy poziom” tablicy lub obiektu, tak jak to rozumiem. Powyższa odpowiedź jest poprawna, jeśli chcesz oglądać głębiej. bennadel.com/blog/…Głębokie nurkowanie na obiekcie w zegarku ma wpływ na wydajność. Czasami (na przykład, gdy zmiany są popychaniami i wyskakuje), możesz chcieć obejrzeć łatwo obliczalną wartość, na przykład array.length.
źródło
Jeśli zamierzasz oglądać tylko jedną tablicę, możesz po prostu użyć tego fragmentu kodu:
przykład
Ale to nie będzie działać z wieloma tablicami:
przykład
Aby poradzić sobie z tą sytuacją, zwykle przekształcam wiele tablic, które chcę oglądać, w JSON:
przykład
Jak zauważył @jssebastian w komentarzach,
JSON.stringify
może być lepszym rozwiązaniem,angular.toJson
ponieważ może obsługiwać członków zaczynających się na „$” i możliwe inne przypadki.źródło
$watch
, czy można zrobić to samo?Pass true as a third argument to watch an object's properties too.
Zobacz: cheatography.com/proloser/cheat-sheets/angularjsangular.toJson
w przypadku pojedynczej tablicy.Warto zauważyć, że w Angular 1.1.x i nowszych możesz teraz używać $ watchCollection zamiast $ watch. Chociaż $ watchCollection wydaje się tworzyć płytkie zegarki, więc nie będzie działać z tablicami obiektów, jak się spodziewasz. Może wykrywać dodawanie i usuwanie do tablicy, ale nie właściwości obiektów wewnątrz tablic.
źródło
Oto porównanie 3 sposobów oglądania zmiennej zasięgu z przykładami:
$ watch () jest uruchamiany przez:
$ watchCollection () jest wywoływane przez wszystko powyżej ORAZ:
$ watch (..., true) jest wyzwalany przez WSZYSTKO powyżej ORAZ:
JESZCZE JEDNA RZECZ...
$ watch () jest jedynym, który uruchamia się, gdy tablica jest zastępowana inną tablicą, nawet jeśli ta inna tablica ma taką samą dokładną treść.
Na przykład, gdzie
$watch()
strzelałby i$watchCollection()
nie:Poniżej znajduje się link do przykładowego JSFiddle, który używa wszystkich różnych kombinacji zegarków i generuje komunikaty dziennika, aby wskazać, które „zegarki” zostały uruchomione:
http://jsfiddle.net/luisperezphd/2zj9k872/
źródło
$ watchCollection realizuje to, co chcesz zrobić. Poniżej znajduje się przykład skopiowany ze strony internetowej angularjs http://docs.angularjs.org/api/ng/type/$rootScope.Scope Chociaż jest to wygodne, wydajność należy wziąć pod uwagę, szczególnie podczas oglądania dużej kolekcji.
źródło
To rozwiązanie działało dla mnie bardzo dobrze, robię to w dyrektywie:
scope. $ watch (attrs.testWatch, function () {.....}, true);
prawda działa całkiem dobrze i reaguje na wszystkie porcje (dodawanie, usuwanie lub modyfikowanie pola).
Oto działający plunker do zabawy.
Dogłębne obserwowanie tablicy w AngularJS
Mam nadzieję, że może ci się to przydać. Jeśli masz jakieś pytania, nie krępuj się zapytać, postaram się pomóc :)
źródło
W moim przypadku musiałem obejrzeć usługę, która zawiera obiekt adresu obserwowany również przez kilka innych kontrolerów. Utknąłem w pętli, dopóki nie dodałem parametru „true”, który wydaje się być kluczem do sukcesu podczas oglądania obiektów.
źródło
Ustawienie
objectEquality
parametru (trzeciego parametru)$watch
funkcji jest zdecydowanie poprawnym sposobem oglądania WSZYSTKICH właściwości tablicy.Piran odpowiada na to wystarczająco dobrze i również wspomina
$watchCollection
.Więcej szczegółów
Powodem, dla którego odpowiadam na pytanie, na które już udzielono odpowiedzi, jest to, że chcę podkreślić, że odpowiedź wizardwerdna nie jest dobra i nie należy jej używać.
Problem polega na tym, że trawienia nie następują natychmiast. Muszą poczekać na zakończenie bieżącego bloku kodu przed wykonaniem. Dlatego obserwuj
length
tablicę, która może faktycznie przegapić kilka ważnych zmian, które$watchCollection
zostaną przechwycone.Załóż tę konfigurację:
Na pierwszy rzut oka może się wydawać, że strzelałyby jednocześnie, tak jak w tym przypadku:
To działa wystarczająco dobrze, ale rozważ to:
Zauważ, że wynikowa długość była taka sama, mimo że tablica ma nowy element i straciła element, więc jeśli chodzi o obserwację
$watch
,length
nie zmieniła się.$watchCollection
jednak to zrozumiałam.Ten sam rezultat dzieje się z naciśnięciem i popem w tym samym bloku.
Wniosek
Aby obejrzeć każdą właściwość w tablicy, użyj
$watch
samej tablicy z trzecim parametrem (objectEquality) zawartym i ustawionym na true. Tak, jest to drogie, ale czasem konieczne.Aby obserwować, kiedy obiekt wchodzi / wychodzi z tablicy, użyj
$watchCollection
.NIE używaj a
$watch
welength
właściwości tablicy. Nie ma prawie żadnego dobrego powodu, aby to zrobić.źródło
źródło