$물건을 보다

$물건을 보다

사전에서 변경을 감시하고 싶은데 어떤 이유로 워치 콜백이 호출되지 않습니다.

사용하고 있는 컨트롤러는 다음과 같습니다.

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

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

여기 바이올린이 있다.

이름이나 성이 변경될 때마다 $watch 콜백이 발생할 것으로 예상되지만, 그렇게 되지 않습니다.

올바른 방법은 무엇입니까?

불러$watch와 함께true세 번째 인수:

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

기본적으로는 JavaScript에서 두 개의 복잡한 개체를 비교할 때 두 개체가 동일한 값을 참조하는지 여부를 확인하는 대신 두 개체가 동일한 값을 참조하는지 여부를 묻는 "참조" 동일성을 확인합니다.

Angular 설명서에 따르면 세 번째 파라미터는objectEquality:

언제objectEquality == truewatchExpression의 부등식은 함수에 따라 결정됩니다.나중에 비교할 수 있도록 개체 값을 저장하기 위해 함수가 사용됩니다.따라서 복잡한 객체를 감시하는 것은 기억력과 성능에 악영향을 미칩니다.

그form오브젝트는 변경되지 않고name속성은

갱신된 바이올린

function MyController($scope) {
$scope.form = {
    name: 'my name',
}

$scope.changeCount = 0;
$scope.$watch('form.name', function(newVal, oldVal){
    console.log('changed');
    $scope.changeCount++;
});
}

다른 사용자가 키 -> 값 쌍을 가진 데이터스토어 종류의 서비스를 가지고 있는 경우 성능 힌트는 거의 없습니다.

data Store라는 서비스가 있는 경우 빅 데이터 개체가 변경될 때마다 타임스탬프를 업데이트할 수 있습니다.이렇게 하면 개체 전체를 자세히 관찰하는 대신 변경에 대한 타임스탬프만 관찰할 수 있습니다.

app.factory('dataStore', function () {

    var store = { data: [], change: [] };

    // when storing the data, updating the timestamp
    store.setData = function(key, data){
        store.data[key] = data;
        store.setChange(key);
    }

    // get the change to watch
    store.getChange = function(key){
        return store.change[key];
    }

    // set the change
    store.setChange = function(key){
        store.change[key] = new Date().getTime();
    }

});

지시문에서는 타임스탬프가 변경되는 것만 보고 있습니다.

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

코드가 작동하지 않는 이유는$watch디폴트로는 참조 체크가 이루어집니다.즉, 전달된 객체가 새로운 객체임을 확인할 수 있습니다.그러나 이 경우 양식 객체의 일부 속성을 수정하고 새 속성을 생성하지 않습니다.성공하려면 합격하면 된다.true세 번째 파라미터로 지정합니다.

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

동작하지만 $watchCollection을 사용하면 $watchCollection보다 효율적입니다.$watchCollection는 폼 오브젝트의 얕은 속성을 감시합니다.예.

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

폼 오브젝트의 변경을 검토하고 있는 경우, 가장 주의 깊게 관찰할 수 있는 접근법은
$watchCollection다양한 성능 특성에 대해서는 공식 문서를 참조해 주십시오.

이것을 시험해 보세요.

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    function track(newValue, oldValue, scope) {
        console.log('changed');
    };

    $scope.$watch('form.name', track);
}

오브젝트 배열 내의 오브젝트 변경을 감시하고 싶은 사람에게는 (이 페이지의 다른 솔루션에서는 효과가 없었던 것처럼) 이 방법이 도움이 되는 것 같습니다.

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"></script>
<div ng-app>
    <div ng-controller="MyController">
        <label>Name:</label> <input type="text" ng-model="form.name"/>
            
        <pre>
            {{ form }}
        </pre>
    </div>
</div>

언급URL : https://stackoverflow.com/questions/19455501/watch-an-object