角度内の透明とスコープ：なぜこれはうまくいかないのですか？

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>'
    };
});

.

プランカーはここにあります。 http://plnkr.co/edit/yrhcngjqaq1nhdtuwxku

Transcleusion自体が機能していますが、{{title}}はディレクティブのテンプレートに置き換えられます。
ただし、DIREXIVEには範囲内に変数{{title}}がある場合でも、断続要素内のtitleが空になります。なぜそれは？

Answer 1

断続要素の範囲は、指令の児童範囲ではなく兄弟姉妹ではありません。これがドキュメンテーションのようなものです。

典型的な設定では、ウィジェットは分離範囲を作成しますが、トランスクークリュージョンは子供ではありませんが、分離範囲の兄弟。

最も簡単な解決策この場合、越えた範囲にアクセスできる方法は次のようなものです。

.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;
        }
    };
});

.

デモ： http://plnkr.co/edit/ouq9b4f2qfph557708q1?p=previewed/a.>

Answer 2

@dfsqは正しいです：

断続要素の範囲は子供の範囲ではありません 指令だが兄弟1

これがAngularJSの予想される動作である理由をさらに調整したいのですが。ドキュメントが言うように：

典型的な設定では、ウィジェットは分離範囲を作成しますが、 トランスクイーンは子供ではありませんが、分離範囲の兄弟。この ウィジェットがプライベート状態を持つことを可能にします。 親（プレート分離株）スコープに結合するトランスククルージョン

指令内の断続的な内容は任意である、ディレクティブの分離範囲についての知識を持っているべきではありません。断続的なコンテンツが機能するためには、コンテンツはディレクティブの実装の詳細を知っている必要があります（使用可能なもの）。

コンテンツがディレクティブに属していると判断した場合。あなたは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
           });
          }
        };
    });

.

デモ