Transclusion 및 범위에서 각:왜 이 작동하지 않습니까?

Question

나는 아주 간단한 설치:

<pane title="mytitle">Title in parent (transcluded): {{title}}</pane>

고

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<div>' +
                  '<div>Title in isolated scope: {{title}}</div>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
});

이 plunker 여기에 있습니다: http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku

이 transclusion 자체가 작동하지만 이 {{title}} 단체에 지시어의 템플릿입니다.
이 {{title}} 내부 transcluded 요소가 그러나 유지 빈도는 지시어는 변수 title 그것의 범위에서.그 이유는 무엇입니까?

Answer 1

의 범위 transcluded 요소는 것은 아이의 범위 지시어지만 형제 중 하나.이것은 문서를 말한다:

에는 전형적인 설정을 위젯 만들어 분리 범위이지만,transclusion 되지 않은 아이지만,형제자매의 격리 범위가 있습니다.

가장 간단한 솔루션이 이 경우에는 어떻게 액세스할 수 있습니다 transcuded 범위는 다음과 같습니다:

.directive('pane', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            title: '@'
        },
        template:
            '<div>' +
                '<div>Title in isolated scope: {{title}}</div>' +
                '<div ng-transclude></div>' +
            '</div>',
        link: function (scope, element, attrs) {
            scope.$$nextSibling.title = attrs.title;
        }
    };
});

Demo: http://plnkr.co/edit/ouq9B4F2qFPh557708Q1?p=preview

Answer 2

@dfsq 이 올바른지에 대한:

의 범위 transcluded 요소는 것은 아이의 범위 지시어지만 형제 중 하나

나는 더 추가하고 싶어 의견이 왜 이것이 예상되는 행동의련.으로 문서를 말한다:

에는 전형적인 설정을 위젯 만들어 분리 범위하지만, transclusion 되지 않은 아이지만,형제자매의 격리 범위가 있습니다.이 그것은 가능한 위젯을 개인 상태,그리고 transclusion 수밖에 없는 부모(사전 분리)범위가 있습니다.

이 transcluded 콘텐츠 안에 지시어는 임의로,그것은 지 에 대한 지식이 있은 지시어의 격리 범위,그렇지 않으면,우리는 것 만들기 밀결 코드.기 때문에 transcluded 내용,작동하는 콘텐츠를 알고 있어야합 구현 정보의 directive(사용할 수 있는 것을 포함)를 사용합니다.

당신이 결정하는 경우 컨텐츠 그리고 하는 지시어.당신은 2 가지 옵션이 있습니다:

1)콘텐츠의 일부 템플릿

    angular.module('transclude', [])
         .directive('pane', function(){
            return {
              restrict: 'E',
              transclude: true,
              scope: { title:'@' },
              template: '<div>' +
                          '<div>Title in isolated scope: {{title}}</div>' +
                          '<div>' +
                             ' Title in parent (transcluded): {{title}} ' +
                         ' </div>' +
                        '</div>'
            };
   });

데모

2)사용자 tranclusion 바인딩하는 범위:자신

angular.module('transclude', [])
     .directive('pane', function(){
        return {
          restrict: 'E',
          transclude: true,
          scope: { title:'@' },
          template: '<div>' +
                      '<div>Title in isolated scope: {{title}}</div>' +
                      '<div class="transclude"></div>' +
                    '</div>',
        link: function (scope, element, attr,controller, linker) {
           linker(scope, function(clone){
                  element.find(".transclude").append(clone); // add to DOM
           });
          }
        };
    });

데모