AngularJS中的函數未調用$ WatchGroup

Question

我有按下按鈕時會激活的此功能，它將從數組中刪除一個對象：

$scope.remove = function (index) {
    //$scope.myPeople.splice(index, 1);
    $scope.myPeople.splice(index, 1);
    console.log($scope.myPeople);
}

在我的$scop.$watchGroup我有這個：

$scope.$watchGroup(['metric.value', 'startDate.value', 'endDate.value', 'myPeople', 'remove'], function () {
angular.forEach($scope.myPeople, function (key) {
   peopleArray = peopleArray.concat(key.screenName + ",");
});
   peopleArray = peopleArray.slice(0, -1);
   peopleArray = peopleArray.concat("}");
});

但是由於某種原因，當我從列表中刪除某些內容時， $watchGroup似乎沒有在聽...

這是我在通話中使用的html代碼，也許有幫助

 <a ng-click="remove($index)" value="{{person}}" type="button"style="color:red"> <i class="fa fa-times"></i></a> 

我仍在嘗試此事，但沒有成功...

    $scope.$watchCollection('[myPeople]', function () {
    $scope.dataPie.length = 0;

    angular.forEach($scope.myPeople, function (value) {

        $scope.dataPie.push({
            "key": value.name,
            "y": value.followerCount
        });
    });

});

但是調用此函數時不會觸發！

$scope.remove = function (index) {
    $scope.myPeople.splice(index, 1);
    $scope.apply;
}

有任何線索嗎？！？

Answer 1

您可以將$watch與第三個參數true和自定義函數一起使用，該函數返回用於觀看的對象，例如

$scope.$watch(
    function(scope){
      return [scope.myPeople, $scope.$eval('metric.value')];
    }, 
    function() {
        ...
    },
    true
);

樣品

 var app = angular.module('plunker', []); app.controller('ProfileController', function($scope) { $scope.myPeople = [{ name: '1', followerCount: 1 }, { name: '2', followerCount: 2 }, { name: '3', followerCount: 3 }, { name: '4', followerCount: 4 }]; $scope.remove = function(index) { $scope.myPeople.splice(index, 1); }; $scope.dataPie = []; $scope.$watch( function(scope){ return [scope.myPeople, $scope.$eval('metric.value')]; }, function() { $scope.dataPie.length = 0; console.log("test"); angular.forEach($scope.myPeople, function(value) { $scope.dataPie.push({ "key": value.name, "y": value.followerCount }); }); },true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="plunker" class="table-responsive" ng-controller="ProfileController"> <table class="table table-striped"> <thead> </thead> <tbody> <tr ng-repeat="person in myPeople | orderBy:predicate:reverse"> <td><img class="img-rounded" ng-src="{{person.profileImageUrl}}"></td> <td>{{person.name}}</td> <td> <a ng-click="remove($index)" value="{{person}}" type="button" style="color:red"> <i class="fa fa-times"></i>Remover</a> <br> </td> </tr> </tbody> </table> {{dataPie}} <br><br> <label> <input type="radio" ng-model="metric.value" value="11"> valueOne <i class="fa fa-twitter"></i> </label> <br/> <label> <input type="radio" ng-model="metric.value" value="12"> valueTwo <i class="fa fa-twitter"></i> </label> <br/> <label> <input type="radio" ng-model="metric.value" value="13"> valueThree <i class="fa fa-twitter"></i> </label> </div> 

Answer 2

watchGroup不會對數組內容進行深度掃描

您可能要使用$watchCollection而不是$watchGroup 。

在此處查看Angular Docs。

數組既是索引集合又是對象，這就是為什么可以使用$watchCollection原因：

角度代碼

$scope.remove = function(index) {
 $scope.myPeople.splice(index, 1);
};


$scope.$watchCollection('myPeople', function(newPeople, oldPeople) {
 console.log(newPeople);
});

這是一個顯示正在運行的代碼的Plunker： Plunker

Answer 3

如果您更換

$scope.myPeople.splice(index, 1);

用

$scope.myPeople = $scope.myPeople.slice(0).splice(index, 1);

您不需要額外的$ watch。