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

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