我想观察字典中的变化,但由于某种原因,手表回调没有被调用。

这是我使用的一个控制器:

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

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

这是小提琴。

我期望$watch回调在每次更改姓名或姓氏时被触发,但它没有发生。

正确的做法是什么?


当前回答

对于任何想要观察对象数组中对象的变化的人来说,这似乎对我有用(因为本页上的其他解决方案没有):

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默认执行引用检查。简而言之,它确保传递给它的对象是new object。但在你的例子中,你只是修改了form object的一些属性,而不是创建一个新的。为了使它工作,你可以传递true作为第三个参数。

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

它将工作,但你可以使用$watchCollection,这将比$watch更有效,因为$watchCollection将监视窗体对象上的浅属性。如。

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

如果有人有一个key ->值对的数据存储服务,性能提示:

如果你有一个名为dataStore的服务,你可以在大数据对象发生变化时更新时间戳。 这样,您就不用深入地观察整个对象,而是只观察更改的时间戳。

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

对于任何想要观察对象数组中对象的变化的人来说,这似乎对我有用(因为本页上的其他解决方案没有):

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

用true作为第三个参数调用$watch:

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

默认情况下,在JavaScript中比较两个复杂对象时,它们将被检查是否“引用”相等,即询问两个对象是否指向同一个对象,而不是“值”相等,即检查这些对象的所有属性的值是否相等。

根据Angular文档,第三个参数是objectEquality:

当objectEquality == true时,watchExpression的不等式根据角度确定。=函数。为了保存对象的值以供以后比较,使用angular。使用拷贝功能。因此,这意味着观看复杂的物体会对记忆和表现产生不利影响。

你必须在$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>