javascript - $watch 不处理来自其他 Controller 的变量？

Question

我有一个 Controller ，它显示一个 list ，并将选择存储在一个数组中。

我的另一个 Controller 在第一个 Controller 的阵列上运行一个 $http.get。

如何设置 $watch 以便每当数组发生变化时，都会发送一个新的 HTTP GET 请求？

我的尝试:http://plnkr.co/edit/EaCbnKrBQdEe4Nhppdfa

// See plnkr for other controller + FooSelection factory + view
function SimpleQueryResCtrl($scope, $http, FooSelection) {
    $scope.foo_list_selection = FooSelection;

    $scope.$watch('foo_list_selection', function (newValue, oldValue) {
        if (newValue !== oldValue)
            $http.get('/api/' + $scope.foo_list_selection).success(function (largeLoad) {
                $scope.myData = largeLoad;
            });
    });
}

SimpleQueryResCtrl.$inject = ['$scope', '$http', 'FooSelection'];

Answer 1

默认情况下，$watch 检查对引用的更改，而不是检查是否相等。由于对象和数组在修改时仍然具有相同的引用，因此不会触发监视。至少有两个选项可以让它发挥作用。

如果您想要通知的唯一更改是修改数组的大小(添加或删除元素与更改元素的内容)，您可以在数组的 length 属性上设置监视，而不是像:

$scope.$watch('foo_list_selection.length', function (newValue, oldValue) {
// ...

否则，您可以使用可选的 $watch 参数 objectEquality，它需要一个 bool 值。这会进行相等性检查而不是引用检查。

$scope.$watch('foo_list_selection', function (newValue, oldValue) {
    if (newValue !== oldValue)
        $http.get('/api/' + $scope.foo_list_selection).success(function (largeLoad) {
        $scope.myData = largeLoad;
    });
}, true);  // <- put `true` here

这不是默认行为，因为它对所有元素执行成本更高的深度检查，因此仅在必要时使用。