2

我有一个简单的 ngRepeat，如下所示：

<some-element ng-repeat="singleRecord in arrayOfRecords track by singleRecord.id">
    <!-- stuff -->
</some-element>

arrayOfRecords从服务器更新，可能包含新数据。

ngRepeat的track by功能可以判断何时将新元素添加到数组中并自动更新 DOM 而无需更改现有元素。当有新数据进入或旧数据被删除时，我想挂钩该代码并执行回调函数。是否可以通过 Angular 轻松做到这一点？

据我了解，$$watchers只要某些变量发生更改，就会触发回调，但我不知道如何破解它。这是正确的方向吗？

注意：我知道我可以手动保存arrayOfRecords并在获取新值时将其与新值进行比较以查看发生了什么变化。但是，由于 Angular 已经提供了track by具有此逻辑的功能，如果我可以让 Angular 在数组中添加或删除元素时自动触发事件回调，那就太好了。复制 Angular 中已经存在的这种逻辑是没有意义的。

4

2 回答 2

3

可能您可以创建一个指令并将其与 ng-repeat 一起添加，因此该指令在创建时（当由 ng-repeat 添加项目时）将发出一个事件，同样，当项目被销毁时它会发出另一个事件。

这里有一个简单的实现：

.directive('tracker', function(){
  return{
    restrict:'A',
    link:function(scope, el, attr){
      scope.$emit('ITEM_ADDED', scope.$eval(attr.tracker))
      scope.$on('$destroy', function(){
        scope.$emit('ITEM_REMOVED', scope.$eval(attr.tracker))
      });
    }
  }
});

并将其用作：

<some-element 
       ng-repeat="singleRecord in arrayOfRecords track by singleRecord.id"
       tracker="item">

例如，在父控制器上监听这些事件。

演示

或者使用函数绑定但以不同的方式，而不使用隔离范围。

.directive('tracker', function() {
  return {
    restrict: 'A',
    link: function(scope, el, attr) {
      var setter = scope.$eval(attr.tracker);
      if(!angular.isFunction(setter)) return;
      setter({status:'ADDED', item:scope.$eval(attr.trackerItem)});


      scope.$on('$destroy', function() {
         setter({status:'REMOVED', item:scope.$eval(attr.trackerItem)});
      })
    }
  }
});

演示

上面的问题是针对您的问题的，因为没有其他内置方法，请注意，如果您要真正找出添加/删除的项目，您也可以通过区分 2 个列表在控制器中执行此操作。您可以尝试使用类似 lodash api_.unique甚至简单的循环比较来查找结果。

  function findDif(oldList,newList){
       return {added:_.uniq(newList, oldList), removed:_.uniq(oldList, newList)};
 }

演示

于 2015-06-04T17:59:54.373 回答
0

您可以将其更改为：

<div ng-model="arrayOfRecords">
<some-element ng-repeat="singleRecord in arrayOfRecords track by singleRecord.id">
    <!-- stuff -->
</some-element>
</div>

一旦 arrayOfRecords 发生变化，模型就会发生变化。

于 2019-09-09T08:42:32.063 回答