Question

我正在使用controllerAs语法：

.state('operators', {
      url: '/operators',
      templateUrl: 'app/features/operators/operators.html',
      controller: 'OperatorsController',
      controllerAs: 'vm'
    })

我的控制器vm.selectedOperators中有一个变量，我想要观察其中的变化：

var vm = this;
vm.selectedOperators = [];


$scope.$watch(function() {
    return vm.selectedOperators;
}, function(current) {
    console.log(current.length);
});

在视图中，表达式用于显示变量中的项目数。

{{vm.selectedOperators.length}} item selected

此变量从其他地方更新（由我在同一视图中使用的多选表指令使用），我看到这个表达式在视图中更新正常。

问题是控制器中的观察者在变量初始化后没有触发，我不知道为什么。

任何人都可以提供任何帮助吗？

由于

更新

我应该提到，我已经尝试过像这样的表达式：

$scope.$watch('vm.selectedOperators', function (current){
    console.log(current);
  });

但这仍然不适合我

Answer 1

试试这个（ES6语法）：

$scope.$watch('vm.selectedOperators', (new, old) => {
  console.log('new:', new, 'old:', old);
});

您应该能够看到更改。

Answer 2

尝试使用Deep Watch Array对象..

深度监视将观察数组列表中的每个对象。它比普通手表贵一点，所以如果普通手表不起作用，请使用： -

这是代码

$scope.$watch('vm.selectedOperators', function (current) {
        console.log(current.length);
},true);

Answer 3

概念：$ watch函数有一个可选的第三个参数 - objectEquality

$watch(watchExpression, listener, [objectEquality]);

当您尝试观察对象时，必须将其设置为true，否则angular将仅匹配两个对象的引用。通过设置它，true使用angular.equals

比较旧对象和新对象

在这里阅读更多相关信息： https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

$scope.$watch(function() {
    return vm.selectedOperators;
}, function(current) {
    console.log(current.length);
}, true);

更新

正如@Martijn Welker在下面的评论中所指出的，如果只需要匹配单个级别的相等而不是完整的对象树，那么$watchCollection会很有用。

$scope.$watchCollection(function() {
    return vm.selectedOperators;
}, function(current) {
    console.log(current.length);
});

范围。$监视控制器内没有触发

3 个答案:

更新