AngularJS中的函数不调用$WatchGroup

Function in AngularJS not calling to $WatchGroup

本文关键字：调用 WatchGroup 函数 AngularJS      更新时间：2023-09-26

我有这个函数，当按下按钮时被激活，它从数组中删除一个对象：

$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;
}

有什么线索吗?!?

您可以将$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>

watchGroup 不会对数组内容进行深度扫描

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

在此处查看 Angular 文档。

数组既是索引集合，也是对象，这就是为什么可以使用$watchCollection的原因：

角度代码 

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

$scope.$watchCollection('myPeople', function(newPeople, oldPeople) {
 console.log(newPeople);
});
下面是一个 Plunker，

显示了代码的运行情况：Plunker

如果替换

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

跟

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

您不需要额外的$watch。

相关文章：