我正在构建自定义树指令:
<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数组之后也是如此。我错过了什么?
答案 0 :(得分:2)
所以,这肯定是角度框架中的一个问题。我相信他们迟早会解决它,但同时如果你需要让你的代码工作,我能够整理一个效果很好的样本。核心是不使用默认的旧/新元素:
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>
这只会调用指令两次(为什么两次,我仍然不确定)。
答案 1 :(得分:0)
正如Gruff Bunny在评论中所指出的,这是AngularJS的一个公开问题,直到当前版本(1.2.13)。现在的解决方法是使用$watch( , true)
或者使用drew_w建议。