$ awasi obyek

Saya ingin melihat perubahan dalam kamus, tetapi untuk beberapa alasan menonton panggilan balik tidak dipanggil.

Berikut adalah pengontrol yang saya gunakan:

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

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

Ini biola .

Saya berharap $ watch callback dipecat setiap kali nama atau nama keluarga diubah, tetapi itu tidak terjadi.

Apa cara yang benar untuk melakukannya?

Panggil $watchdengan truesebagai argumen ketiga:

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

Secara default ketika membandingkan dua objek kompleks dalam JavaScript, mereka akan diperiksa untuk "referensi" kesetaraan, yang menanyakan apakah kedua objek merujuk pada hal yang sama, bukan "nilai" kesetaraan, yang memeriksa apakah nilai semua properti dari mereka benda sama.

Per dokumentasi Angular , parameter ketiga adalah untuk objectEquality:

Kapan objectEquality == true, ketidaksetaraan watchExpression ditentukan sesuai dengan angular.equalsfungsinya. Untuk menyimpan nilai objek untuk perbandingan nanti, angular.copyfungsi tersebut digunakan. Ini karena itu berarti bahwa menonton objek yang kompleks akan memiliki memori yang buruk dan implikasi kinerja.

The formobjek tidak berubah, hanya nameproperti

biola diperbarui

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

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

Sedikit tip kinerja jika seseorang memiliki jenis layanan datastore dengan pasangan kunci -> nilai:

Jika Anda memiliki layanan yang disebut dataStore , Anda dapat memperbarui cap waktu setiap kali objek data besar Anda berubah. Dengan cara ini, alih-alih memperhatikan seluruh objek, Anda hanya melihat stempel waktu untuk perubahan.

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();
    }

});

Dan dalam arahan Anda hanya menonton cap waktu untuk berubah

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

Alasan mengapa kode Anda tidak berfungsi adalah karena $watchsecara default memeriksa referensi. Jadi singkatnya itu memastikan bahwa objek yang dilewati adalah objek baru. Tetapi dalam kasus Anda, Anda hanya memodifikasi beberapa properti dari objek form yang tidak membuat yang baru. Untuk membuatnya berfungsi, Anda dapat lulus truesebagai parameter ketiga.

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

Ini akan bekerja tetapi Anda dapat menggunakan $ watchCollection yang akan lebih efisien daripada $ watch karena $watchCollectionakan mengawasi properti dangkal pada objek form. Misalnya

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

Saat Anda mencari perubahan bentuk objek, pendekatan menonton terbaik adalah menggunakan
$watchCollection. Silakan lihat dokumentasi resmi untuk karakteristik kinerja yang berbeda.

Coba ini:

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

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

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

Bagi siapa pun yang ingin melihat perubahan pada objek dalam array objek, ini sepertinya berhasil bagi saya (seperti solusi lain pada halaman ini tidak):

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);

Anda harus mengubah $ 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>