Question

我试图通过一个例子来理解$ watch是如何工作的，但它不起作用。在这个例子中，我正在观看一个名为favorites的数组，它在$ 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：

{{1}}

Answer 2

您也可以使用深度观看，如下所示：

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

$ watch（）将由以下方式触发：

$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

$ watch（...，true）将由上面的所有内容触发AND：

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

附加说明：重建受监视对象时，不会触发$ watch（...，true）。虽然$ buildCollection（...，true）将在重建时触发。

了解$ watch的工作原理

2 个答案: