Written by angular-style
on 2021-02-23

[자바 스크립트] $ 개체 관찰

Call $watch with true as the third argument:

$scope.$watch( 'form' , function ( newVal, oldVal ) { console .log( 'changed' ); }, true );

By default when comparing two complex objects in JavaScript, they will be checked for "reference" equality, which asks if the two objects refer to the same thing, rather than "value" equality, which checks if the values of all the properties of those objects are equal.

Per the Angular documentation, the third parameter is for objectEquality :

When objectEquality == true , inequality of the watchExpression is determined according to the angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. This therefore means that watching complex objects will have adverse memory and performance implications.

-------------------

The form object isn't changing, only the name property is

updated fiddle

-------------------

Little performance tip if somebody has a datastore kind of service with key -> value pairs:

If you have a service called dataStore, you can update a timestamp whenever your big data object changes. This way instead of deep watching the whole object, you are only watching a timestamp for change.

app.factory( 'dataStore' , function ( ) { var store = { data : [], change : [] }; store.setData = function ( key, data ) { store.data[key] = data; store.setChange(key); } store.getChange = function ( key ) { return store.change[key]; } store.setChange = function ( key ) { store.change[key] = new Date ().getTime(); } });

And in a directive you are only watching the timestamp to change

app.directive( "myDir" , function ( $scope, dataStore ) { $scope.dataStore = dataStore; $scope.$watch( 'dataStore.getChange("myKey")' , function ( newVal, oldVal ) { if (newVal !== oldVal && newVal){ } }); });

-------------------

The reason why your code doesn't work is because $watch by default does reference check. So in a nutshell it make sure that the object which is passed to it is new object. But in your case you are just modifying some property of form object not creating a new one. In order to make it work you can pass true as the third parameter.

$scope.$watch( 'form' , function ( newVal, oldVal ) { console .log( 'invoked' ); }, true );

작동하지만 $watchCollection 양식 객체의 얕은 속성을 감시하기 때문에 $ watch보다 더 효율적인 $ watchCollection을 사용할 수 있습니다 . 예

$scope.$watchCollection( 'form' , function ( newVal, oldVal ) { console .log(newVal, oldVal); });

-------------------

양식 객체 변경을 찾고있을 때 가장 잘 관찰하는 방법은를 사용하는 것

$watchCollection 입니다. 다른 성능 특성에 대한 공식 문서 를 살펴보십시오 .

-------------------

이 시도:

-------------------

개체 배열 내에서 개체의 변경 사항을 확인하려는 모든 사람에게 이것은 저에게 효과가있는 것처럼 보였습니다 (이 페이지의 다른 솔루션은 그렇지 않았으므로).

function MyController ( $scope ) { $scope.array = [ data1: { name : 'name' , surname : 'surname' }, data2 : { name : 'name' , surname : 'surname' }, ] $scope.$watch( function ( ) { return $scope.data, function ( newVal, oldVal ) { console .log(newVal, oldVal); }, true );

$ watch ...에서 변경해야합니다.

-------------------

function MyController ( $scope ) { $scope.form = { name : 'my name' , } $scope.$watch( 'form.name' , function ( newVal, oldVal ) { console .log( 'changed' ); }); } < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js" > < div ng-app > < div ng-controller = "MyController" > < label > Name: < input type = "text" ng-model = "form.name" /> < pre > {{ form }}

공유하기 글 요소 저작자표시

출처https://stackoverflow.com/questions/22080037

from http://hotelsdotcom.tistory.com/1595 by ccl(A) rewrite - 2021-02-23 09:27:22

Top