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

时间:2014-02-21 13:22:01

标签: javascript angularjs angularjs-directive

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

<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数组之后也是如此。我错过了什么?

2 个答案:

答案 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建议。