2014-02-21 3 views
2

내가 짓고 있어요 사용자 정의 트리 지시어 : 자바 스크립트에서AngularJS와 1.2.6 : 시계 지침의 상위 범위를 수집

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

: 지시어에서

$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 (_)를 사용합니다. 새 항목을 상위 범위의 myItems 배열로 푸시 한 후에도 newItems 및 oldItems는 항상 동일합니다. 내가 뭘 놓치고 있니?

+0

자신을 돌아보고 실제로 각 변수에 포함 된 내용을 보았습니까? –

+0

예, 푸시 후 newItems 및 oldItems 모두 푸시 항목을 포함합니다. – synergetic

+0

아마 함수가 여러 번 호출 되었습니까? –

답변

0

Gruff Bunny가 의견에서 지적했듯이, 현재 버전 (1.2.13)까지 AngularJS의 미해결 문제입니다. 해결 방법은 $watch(, true)을 사용하거나 drew_w를 제안하는 것입니다.

2

이것은 각도 프레임 워크에서 분명히 중요한 문제입니다. 조만간 조만간에 해결할 것이라고 확신하지만, 코드를 작성해야하는 경우에는 꽤 잘 작동하는 샘플을 조합 할 수있었습니다. 핵심 기본을 기존/새로운 요소를 사용하지 않는 것입니다 : http://plnkr.co/edit/R9hQpRZqrAQoCPdQu3ea?p=preview :

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를 참조하십시오. 그런데 이것이 여러 번 호출되는 이유는 그것이 ng-repeat 안에 있기 때문입니다. 그러나 그것은 "$ parent"를 강제로 사용하는 나의 방법이었습니다. 어쨌든, 이것이 도움이되기를 바랍니다!

편집 - 그래서 하나의 NG 반복 사용하는 다른 plunker (http://plnkr.co/edit/R9hQpRZqrAQoCPdQu3ea?p=preview) 쓴 것은 정말 지시어는 NG 반복 실행되고 있던 몇 번이나 나를 괴롭혔다 :

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

을이 만 지시문을 두 번 호출합니다 (왜 두 번, 아직 확실하지 않은 이유).

관련 문제