Question

我基本上希望在Backbone的集合中绑定到'add'和'remove'事件。我认为在AngularJS中基本上没办法做到这一点，我们已经解决的当前解决方法是$watch()数组的length并手动区分/重新计算整个事物。这真的是很酷的孩子吗？

编辑：具体来说，观察数组的长度意味着我不知道哪个元素已被更改，我需要手动“diff”。

Answer 1

我认为使用$watch是一个很好的解决方案，但$watchCollection对您来说可能更好。 $watchCollection不执行深度比较，只关注数组修改，例如插入，删除或排序（非项目更新）。

例如，如果您想让attribut order与数组顺序保持同步：

$scope.sortableItems = [
    {order: 1, text: 'foo'},
    {order: 2, text: 'bar'},
    {order: 3, text: 'baz'}
];

$scope.$watchCollection('sortableItems', function(newCol, oldCol, scope) {
    for (var index in newCol) {
        var item = newCol[index];
        item.order = parseInt(index) + 1;
    }
});

但是对于您的问题，我不知道是否有比手动浏览阵列更好的解决方案来识别更改。

Answer 2

在Angular中观看数组的方法是$watch(array, function(){} ,true)

Answer 3

我会创建子范围并单独观察它们。这是一个例子：

$scope.myCollection = [];
var addChild = function()
{
  var Child = $scope.$new();
  Child.name = 'Your Name here';

  Child.$watch('name', function(newValue) {
     // .... do something when the attribute 'name' is changed ...
  });

  Child.$on('$destroy', function() {
    //... do something when this child gets destroyed 
  });


  $scope.myCollection.push(Child); // add the child to collection array

};

// Pass the item to this method as parameter, 
// do it within an ngRepeat of the collection in your views 
$scope.deleteButtonClicked = function(item)
{
  var index = $scope.myCollection.indexOf(item); //gets the item index
  delete $scope.myCollection[index]; // removes the item on the array
  item.$destroy(); // destroys the original items
}

Answer 4

请详细说明您的用例。跟踪元素持久性的解决方案之一是使用ngRepeat指令和监听元素的$ destroy事件的自定义指令：

<div ng-repeat="item in items" on-delete="doSomething(item)">

angular.module("app").directive("onDelete", function() {
    return {
        link: function (scope, element, attrs) {
            element.on("$destroy", function () {
                scope.$eval(attrs.onDelete);
            });
        }
    }
});

Answer 5

也许解决方案是创建集合类（就像骨干一样），你也可以很容易地挂钩事件。

我在这里所做的解决方案并不是非常全面，但是应该给你一个关于如何做到这一点的一般性指导。

http://beta.plnkr.co/edit/dGJFDhf9p5KJqeUfcTys?p=preview

如何在AngularJS中观察数组以进行更改

5 个答案: