javascript - 控制器中的 $watch 不会在将项目推入指令中的数组时触发

Question

publish.selected_tags我在指令和控制器之间有一个双向绑定变量。

我$watch在控制器中保留了该变量：

$scope.$watch('publish.selected_tags', function(new_val, old_val) {
    console.log(new_val); //print new value
})

我面临的问题是，当我将一个项目推入selected_tags列表时，$watch不会触发：

return {
    scope: {
        selected_tags: '='
    },
    link: function(scope, element, attrs) {
        scope.selected_tags.push('item') //watch in the controller not getting fired
    }
}

但是，当我分配 selected_tags给一个数组$watch时，控制器中的会被触发：

return {
    scope: {
        selected_tags: '='
    },
    link: function(scope, element, attrs) {
        scope.selected_tags = ['item'] //watch in the controller getting fired!
    }
}

为什么会这样？$watch如果我想推动一个元素，我怎样才能让我开火？

Answer 1

$watch用于查看范围内的属性。如果您想观看一个集合，您需要使用$watchCollection（对于浅层观看）或$watch('publish.selected_tags', function(newVal, oldVal){}, true)（对于深度观看）。

Answer 2

我认为您应该使用$watchCollection()来观察数组中的变化。$watch()如果我没记错的话，当表达式的值发生变化时触发，而不是在您正在观看的对象内的属性变化时触发。

见https://code.angularjs.org/1.1.4/docs/api/ng.$ro​​otScope.Scope#$watchCollection

Answer 3

使用 $scope.$watchCollection(...)

参考。https://docs.angularjs.org/api/ng/type/$rootScope.Scope