Понимание работы $ watch

Question

Я пытаюсь понять, как $ watch работает на примере, но его не работает. В этом примере я просматриваю массив, называемый фаворитом, который находится в пределах $ scope. Если изменяется массив избранных, я ожидаю записать новое значение в консоли. Не уверен, что это правильный способ использования $ watch.

Код контроллера

var mods = angular.module("listApp",[]) 
    mods.controller("prodCtlr", function($scope){ 
      $scope.favorites = ["a", "b", "c", "d"]  

      $scope.delete = function(index){ 
       $scope.favorites.splice(index,1) 
      } 

      $scope.$watch(function(){ 
       return $scope.favorites; 
      }, function(newVal, oldVal){ 

       console.log(newVal); 

      }) 

     } 
    ); 

HTML

 <table class="table table-striped"> 
      <tr ng-repeat="fav in favorites"> 
      <td>{{fav}}</td><td><input type="button" class="btn btn-primary" value="Delete!" ng-click="delete($index)" ng-model="fav"></input></td> 
      </tr> 
     </table> 

Answer 1

$watchCollection использование:

$scope.favorites = ["a", "b", "c", "d"]; 
$scope.dataCount = 4; 

$scope.$watchCollection('favorites', function(newFavs, oldFavs) { 
    $scope.dataCount = newFavs.length; 
}); 

Answer 2

Вы также можете использовать с глубокими часами, как это:

$scope.$watch('favorites', function(newFavs, oldFavs) { 
    $scope.dataCount = newFavs.length; 
}, true); 

$ часы() будет вызван:

$scope.myArray = []; 
$scope.myArray = null; 
$scope.myArray = someOtherArray; 

$ watchCollection() будет вызван все выше и:

$scope.myArray.push({}); // add element 
$scope.myArray.splice(0, 1); // remove element 
$scope.myArray[0] = {}; // assign index to different value 

$ смотреть (..., правда) будет срабатывать на все выше и:

$scope.myArray[0].someProperty = "someValue"; 

Дополнительная Примечание: $ смотреть (..., правда) не будет срабатывать, когда контролируемый объект перестраивается. Пока $ watchCollection (..., true) будет срабатывать при восстановлении.