부모 범위 속성을 바인딩하는 방법은 무엇입니까?

Question

부모로부터 자식 요소 안에 'c'속성을 가져와야합니다 (jsfiddle 참조) 가능합니까?

<div ng-app="myApp"> 
    <box c="yellow"> 
     <item>item</item> 
    </box> 
</div>  

angular.module('myApp', []) 
.directive('box', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div ng-transclude></div>' 
    }; 
}) 
.directive('item', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: {c:'='}, 
     template: '<div>c:{{c}}</div>' 
    }; 
}); 

Answer 1

translcude를 사용할 때 부모 dom 객체는 실제로 범위 트리의 부모가 아닙니다. 여기에 멋진 범위 상속 설명 :

What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

직접 그것을 얻을 수 있지만, 그것은 아름다운 방법이 아니다 :

var app = angular.module('plunker', []); 

app.directive('box', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: { c: '@' }, 
     template: '<div ng-transclude></div>' 
    }; 
}); 

app.directive('item', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div>c:{{$parent.$$prevSibling.c}}</div>' 
    }; 
}); 

예 : 좀 더 ng-가 생각 http://plnkr.co/edit/YuYry9?p=preview

그 일을하는 것처럼 ...

Answer 2

항목 지시어는 격리 범위를 정의하므로 속성을 정의해야합니다. 원하는 각 범위 속성에 대한 항목. 그래서 최소한 다음이 필요합니다 : 이제

<item c="c">item</item> 

의 c을 = 요구의 오른쪽에있는 상자의 지시에 범위 속성 수, 그래서 연결 기능을 만들 그렇게 만들 :

link: function(scope, element, attrs) { 
    scope.c = attrs.c; 
} 

Fiddle.