transclusion을 사용하는 사용자 지정 지시문에서 ng-controller의 각도 범위

Question

저는 Angular에 아직 익숙하지 않아 바보 같은 질문이 있으면 사과드립니다 ... transclusion을 사용하는 사용자 지정 지시문이 있습니다. 데이터가 작품을 바인딩 왜 부모 요소에 NG-컨트롤러를 할당하면,하지만 난 그것에 직접 컨트롤러를 할당 할 때 이해하기 :

코드 :

angular.module('HelloWorld', []) 

.controller('HelloController', function($scope) { 
    $scope.name = 'you' 
}) 

.directive('hello', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    template: '<ng-transclude />' 
    }; 
}); 

HTML :

<!-- why does this one work? --> 
<div ng-controller="HelloController"> 
    <hello>Hi there, {{name}}!</hello> 
</div> 

<!-- but not this one? --> 
<hello ng-controller="HelloController"> 
    <p> Hi there, {{name}}!</p> 
</hello> 

Plunker : https://plnkr.co/edit/ICztHcKU4W2EgFmy8OqQ?p=preview

어떤 아이디어?

Answer 1

지시문은 요소로 컴파일 된 개체 (템플릿, 바인딩, 컨트롤러 및 기타 속성 포함)를 반환하는 함수로 정의됩니다.

요소 안에 넣은 속성은 지시문 바인딩 (또는 격리 된 범위)으로 전달되지만 해석되지 않습니다.

컨트롤러를 기술적으로 지시어에 특성으로 전달할 수 있지만 지시문에 컨트롤러 속성이 있으므로 올바른 방법이 아닙니다.

예를 들어이 작동합니다 : https://plnkr.co/edit/WknbSDI4HlQyp2vQIkbR?p=preview

angular.module('HelloWorld', []) 

.controller('HelloController', function($scope) { 
    $scope.name = 'you' 
}) 

    .directive('hello', function() { 
     return { 
     restrict: 'E', 
     scope: { 
      ngController: '&' 
     }, 
     transclude: true, 
     template: '<ng-transclude />', 
     controller: ngController 
     }; 
    }); 

그러나 당신은 당신이 직접 더 독립적으로 만들 것 지시어 내부

controller: function() {} 

를 사용할 수 있습니다 참조하십시오.