$ watch无法在其他控制器上使用变量吗？

Question

我有一个控制器，该控制器显示一个清单，并将所选内容存储在数组中。

我的另一个控制器从第一个控制器在阵列上运行$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属性上设置watch，而不是像这样：

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

否则，您可以使用可选的$watch参数objectEquality，该参数需要一个布尔值。这将执行相等性检查，而不是引用检查。

$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

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

Answer 2

将某些逻辑移到工厂，然后将其发送到带有$rootScope.$broadcast的所有控制器，将使您的信息到达正确的位置。

我将数组的创建移到了工厂，然后从那里使用$ broadcast：

myApp.factory('FooSelection', function ($rootScope) {
var tempArr = [];
var fixArray = function(item){
  if (tempArr.indexOf(item) === -1){
    tempArr.push(item);
  } else {
    tempArr.splice(tempArr.lastIndexOf(item), 1);
  }
  $rootScope.$broadcast('newArray', tempArr);

}

return {fixArray: fixArray}
})

当更改时在控制器中使用$scope.$on接收新数据：

function SimpleQueryResCtrl($scope, $http, FooSelection) {
$scope.foo_list_selection = FooSelection;

$scope.$on('newArray', function(evt, message){
  console.log(message) // and you can put your $get method here
})
}

Here's the plunk

Answer 3

在这种情况下，我建议使用用于数据处理和消息的服务来使控制器和UI保持同步。

在这里看看：AngularJS multiple uses of Controller and rootScope