Question

我正在构建自定义树指令：

<ul tree="treeOptions">
    <li>{{ item.code + ' - ' + item.name }}</li>
</ul>

在javascript中：

$scope.myItems = [];
$scope.treeOptions = {
    data: 'myItems',
    ...
}

指令：

(function (angular) {
    'use strict';

    angular.module('tree', []).
        directive('tree', ['$compile', '$document', function ($compile, 
                                                                $document) {
            return {
                restrict: 'A',
                scope: { treeOptions: '=tree' }, //Isolated scope
                compile: function (elem, attrs) {

                    //...

                    return function (scope, elem, attrs) {

                        //...

                        scope.$parent.$watchCollection(scope.treeOptions.data, 
                            function (newItems, oldItems) {
                                var addedItems = _.difference(newItems, oldItems);
                                var removedItems = _.difference(oldItems, newItems);
                                //but newItems and oldItems always the same

                                //...
                            }
                        );      
                    }           
                };
            }
        };
    } ]);
})(angular);

我正在使用lodash（_）来查找新旧项目之间的差异。问题是newItems和oldItems总是相同的，即使将新项目推送到父作用域的myItems数组之后也是如此。我错过了什么？

Answer 1

所以，这肯定是角度框架中的一个问题。我相信他们迟早会解决它，但同时如果你需要让你的代码工作，我能够整理一个效果很好的样本。核心是不使用默认的旧/新元素：

  var oldWorkingItems = scope.$parent[attrs.testDirective].slice(0);
  scope.$parent.$watchCollection(attrs.testDirective, 
      function (newItems, oldItems) {
        console.log('NEW Items:' + newItems);
        console.log('Old Items:' + oldWorkingItems);

有关完整示例以及我对错误的再现，请参阅以下Plunkr：http://plnkr.co/edit/R9hQpRZqrAQoCPdQu3ea?p=preview。顺便说一下，之所以这么多被调用的原因是因为它在ng-repeat中，但这是我强制使用“$ parent”的方法。无论如何，希望这有助于一些人！

编辑 - 我真的很烦恼我在ng-repeat中运行指令的次数，所以我写了另一个使用单个ng-repeat的plunker（http://plnkr.co/edit/R9hQpRZqrAQoCPdQu3ea?p=preview）： / p>

<div ng-repeat="element in [1]">
  <div test-directive="testCollection"></div>
</div>

这只会调用指令两次（为什么两次，我仍然不确定）。

Answer 2

正如Gruff Bunny在评论中所指出的，这是AngularJS的一个公开问题，直到当前版本（1.2.13）。现在的解决方法是使用$watch( , true)或者使用drew_w建议。

Angularjs 1.2.6：watch指令的父范围集合

2 个答案: