Question

我在控制器中定义了一个范围，如下所述：

控制器：

var app = angular.module('app', ['ui.select2']);

app.controller('MyCtrl',
  [
    '$scope',
    '$q',
    '$timeout',
    function ($scope, $, $timeout) {
      $scope.data = {};
       $scope.countries = [{
          name : 'India', code : 'IA'
        }, {
          name : 'Israel', code : 'IS'
        }];

        $scope.selectedCountries = [
          'IA'
        ];

        $scope.$watch('selectedCountries', function(newValue, oldValue) {
           console.log ('data');
    });
]);

视图如下所示：

<select
        ui-select2
        multiple
        ng-model="selectedCountries"
        data-placeholder="Choose or Search for countries"
        name="countries"
        style="width:200px;">
        <option ng-repeat="country in countries" value="{{country.code}}">{{country.name}}</option>
</select>

现在，当控制器中的值使用选择下拉列表更改时，值更改将反映在视图中。但手表从未被调用，因为范围没有改变。知道范围没有更新的原因吗？

Answer 1

对于观看集合，将true作为$ watch的第三个参数，因此它变为：

$scope.$watch('selectedCountries', function(...) {...}, true);

这使得$ digest以递归方式逐步通过集合，而不仅仅是进行引用检查。

或者，如果你有一个深层结构，你只需要知道底层是否已经改变（即添加或删除元素），你可以使用$ watchCollection而不是$ watch。

更新：工作Plunker（无深度$ watch（）工作）：http://www.plnkr.co/edit/VaWBq9?p=preview

$ scope在视图中更新，而不是在angularJs的控制器中更新

1 个答案: