$ 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。

更新：有效柱塞（無需深層$ watch（）即可工作）： http ://www.plnkr.co/edit/VaWBq9?p=preview