2014-12-22 3 views
1

누군가 다음과 같은 문제가있는 근본 원인을 설명 할 수 있습니까?루트 요소가 ngRepeat이고 바꾸기 : direct

분리 범위 scope: {}와 지시어는 분리 범위는 지침 내에서 볼 수/액세스 할 수 없습니다, 그리고 지시어에서 변수를 받기 시작하는 것을 의미 다음 ng-repeatreplace: true을 "휴식"는 분리 범위와 루트 요소가있는 경우 바깥 쪽 범위.

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'MainCtrl'; 
}); 

app.directive("foo", function(){ 
    return { 
    replace: true, 
    scope: {}, 
    template: "<div ng-repeat='item in [1]'>{{name}}</div>", 
    controller: function($scope){ 
     $scope.name = "foo"; 
    } 
    }; 
}); 

다음 뷰 "MainCtrl"를 렌더링 것 :

는 여기에 내가 할 수있는 최소한의 재현 예제

<div ng-controller="MainCtrl"> 
    <foo></foo> 
</div> 

템플릿 또는 설정 비 ng-repeat -able 루트 중 하나를 추가 replace: false은 예상 결과 "foo"를 렌더링합니다.

그냥 NG 반복에 대한 발생하지 않습니다

Plunker

+1

나는 그것이 ng-repeat를 위해서만있는 것이 아니라 자식 범위 (예 : ng-if)를 만드는 모든 것에 발생할 수 있으며 true를 대체하면 자식 범위가 지시문의 격리 된 범위를 덮어 씁니다. 왜냐하면 교체는 초기 컴파일 단계에서 발생하기 때문입니다. – PSL

+0

이것은 올바른 것 같습니다. 적절한 답변으로 이것을 신경 써주세요? –

+0

분명히 알려진 버그 : https://github.com/angular/angular.js/issues/9837 – sinelaw

답변

4

이뿐만 아니라 ng-if 같은 범위를 만들어 다른 지시어 일어날 것으로 보인다. 그리고 이것은 지시어의 격리 된 범위가 ng-repeat의 하위 범위에 의해 덮어 쓰기 때문에 발생합니다. 그리고 replace:true 옵션 때문에 ng-repeat는 지시어 소스 요소의 일부가됩니다. 즉, <foo></foo>이고 ng-repeat의 하위 범위는 궁극적 인 상위 범위 MainCtrl (이는 잘못된 것으로 보임)에서 계산되므로 전체 지시문 템플릿이 컨트롤러의 하위 범위에 바인딩되며 모든 보간은 해당 범위에 대해 평가됩니다. 따라서 주 컨트롤러의 범위가 지침에서 확장되는 것을 볼 수 있습니다. 이것은 버그처럼 보입니다.

관련 문제