Transclude 요소와 함께 해당 범위를 지시문에도 전달할 수 있습니까?

Question

순간 나는 약 Transclude 내가이 문 건너 온 내가 충분히 이해 느낌 :

Transclude allows us to pass in an entire template, including its scope, to a directive. 
Doing so gives us the opportunity to pass in arbitrary content and arbitrary scope to a directive. 

합니까이 평균, 거기 범위 요소를 Transclude에 연결되어 있으며이 지침에 전달 될 수 있다면? 그게 사실이라면 지시어 템플릿 내에서 해당 스코프 속성에 액세스 할 수 없습니다.

나를 다시 단계를 몇을 가지고하는 것을 시도하고있는 무슨에 대한 코드를 설명하자

는

JSFiddle Link

내 지시어는 directive-box 및 transclude: true이 지침 정의 개체 (DDO)에 정의되어있다.

지금

<div ng-controller='TransCtrl'>Inside Transclude Scope : {{name}}</div> 

매개자하는 요소이며, 그것이 부착 TransCtrl 제어기를 갖는 자식 사업부,있다.

scope: { 
     title: '@directiveTitle', 
     name: '=' 
     } 

가 어떻게이게 가능 :

지금 DDO이 정의 후 지침 수준에서 TransCtrl의 일부입니다 $scope.name 속성에 액세스하려고?

이것은 부모 범위가 하위 범위 속성에 액세스하려고하는 것과 비슷합니다. JavaScript Protoypical 상속에서 허용됩니까? 아니면 제가 알아야 할 다른 것이 있습니까 ??

이것이 가능하지 않은 경우 첫 번째 진술은 무엇을 의미합니까?

Transclude allows us to pass in an entire template, including its scope, to a directive. 

UPDATE 1 :

내 주요 관심사 컨트롤러는 여전히 우리가 지침으로 범위를 자사 (Transclude 요소)를 통과 할 수 있어야 Transclude 요소로 남아 있어야 다음 지침을 소비 할 수있을 것입니다 그 범위, 즉 name from TransCtrl controller.

<div ng-controller='TransCtrl'>Inside Transclude Scope : {{name}}</div> 

위의 코드 줄은 그대로 두어야합니다.

내 질문에 완전히 틀릴 수도 있지만이를 수행 할 수있게 해주시기 바랍니다.

Answer 1

이 질문에 대한 답변 : https://jsfiddle.net/marssfa4/4/?

외부에서 새 컨트롤러를 만들었습니다. (효과적으로 지시어 내에서 rootScope의 기능을 대체했습니다.) 지시어의 컨트롤러를 컨트롤러 템플릿 내에서 설정했습니다.

길고 짧음에도 불구하고 html을 범위와 함께 자체 범위가있는 지시문으로 변환 할 수 있음을 알 수 있습니다.

HTML :

<div ng-app='myApp' ng-controller="OutsideScope"> 
    <h1>{{externalWorld}}</h1> 
    <div directive-box directive-title='{{directiveWorld}}' name='name'> 
    <div>Inside Transclude Scope : {{name}}</div> 
    </div> 
</div> 

JS (포함 업데이트 1)

angular.module('myApp', []) 
    .directive('directiveBox', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
     title: '@directiveTitle', 
     name: '=' 
     }, 
     transclude: true, 
     template: '<div ng-controller="TransCtrl">\ 
     <h2 class="header">{{ title }}</h2>\ 
       <div class="dirContent">Directive Element</div>\ 
       <div>Outside Transclude Scope : {{name}}</div>\ 
       <div class="content" ng-transclude></div>\ 
      </div>' 
    } 
    }) 
    .controller('TransCtrl', function($scope) { 
    $scope.name = 'Transclude World' 
    }) 
    .controller('OutsideScope', function($scope) { 
    $scope.name = 'External World' 
    }) 
    .run(function($rootScope) { 
    $rootScope.externalWorld = 'External World', 
     $rootScope.directiveWorld = 'Here comes directive' 
    }); 

UPDATE 1 : scope: false가 실수로 JSFIDDLE

는 I 원래 범위 선언 복원 .

정확하게 이해하신다면 컨트롤러에서 요소를 남기고 싶은데 그 요소 내에서 {{name}}을 그대로두고 직접 컨트롤러를 무시하고 컨트롤러의 부모 (즉 지시문) 범위로 사용하십시오.

컨트롤러 지시문 내에 컨트롤러를 배치 한 이유는 이것이 지시문의 범위를 제한하는 유일한 방법이며 코드가없는 요소가 아니기 때문입니다. 컨트롤러에 명시 적으로 컨트롤러를 배치하면 지시문에 다른 범위가 포함되는지 여부에 관계없이 가장 가까운 범위는 지시문에서 선언 된 범위를 무시합니다. 에 관계없이 지침의 범위가 무엇인지 즉,에, {{name}}

에

<div ng-controller='TransCtrl'>Inside Transclude Scope : {{name}}</div>

항상 $scope.name이 TransCtrl에 무엇이든 될 것입니다.

Answer 2

문제는 컨트롤러가 ng-transcluded html 내에서 정의되는 방식과 같습니다.

I는 bindToController가

가 작동 예 this 바이올린 참조 지향성 레벨 제어기를 사용

를 구성

1. 사용하여 명확 만들었다. 잘못된 권리는

   controllerAs: "TransCtrl", 
   bindToController: true 
   

   그리고 당신의 문

   , '부모 범위는 하위 범위의 속성에 액세스하려고'인가? 부모 범위 속성, 즉 하위 (ng-transcluded 콘텐츠) 내에서 이름을 사용하려고 시도 했으므로 prototype 상속이 가능하며 그 반대가 아닙니다.