5

TL;DR: このplunkerで、2 番目のディレクティブが含まれているテンプレートをレンダリングしないのはなぜですか?

この例は単純化されていますが、実際には、これから試みようとしていることが理にかなっているユースケースがあります。

ng-include を使用して、提供されたテンプレートを ng-include と ng-transclude を使用して他の HTML にラップする Angular ディレクティブがあります。それはそれ自体でうまく機能します。

.directive('content', [function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        controller: 'contentCtrl',
        template: '' +
          '<div class="foo">' +
          '  <div ng-transclude></div>' +
          '</div>',
        scope: {
        }
    };  
}])

.directive('contentInner', [function() {
    return {
        restrict: 'E',
        require: '^content', 
        transclude: true,
        replace: true,
        scope: {
        },
        template: '' +
          '<div class="body">' +
          '  <div class="close" ng-click="close()">' +
          '    <i class="icon-remove-sign"></i>' +
          '    <span>Close</span>' +
          '  </div>' +
          '  <div ng-transclude ></div>' +
          '</div>',
        link: function(scope, element, attrs, controller) {
          scope.close = function() {
              controller.close();
          };
        }
    };
}])

しかし、この最初のディレクティブを使用しようとしている別のディレクティブがあり、そこで故障して静かに失敗します。

.directive('box', ['$compile', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            template: '@'
        },
        template: '' +
          '<div>' +
          '  <content>' +
          '    <content-inner>' +
          '      <div ng-include ng-src="{{template}}"/>' +
          '    </content-inner>' +
          '  </conent>' +
          '</div>',
        link: function(scope, element) {
          //$compile(element)(scope);
        }
    };
}]);

生成されたソースを見ると、このようになっていることがわかります

<div template="'template.html'">
  <div class="foo">
    <div ng-transclude="">
      <div class="body ng-scope">
        <div class="close" ng-click="close()">
          <i class="icon-remove-sign"></i>
          <span>Close</span>
        </div>
        <div ng-transclude="">
          <div ng-include="" ng-src="'template.html'" 
              class="ng-scope" src="'template.html'">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

したがって、最も内側のレベルの ng-include のテンプレートへの参照はありますが、レンダリングされていません。プランカー。

では、テンプレートは 2 番目のディレクティブのどこに移動したのでしょうか?

4

1 に答える 1

12

2つのことを変更することで、問題を解決できたと思います。ここを参照してください: plunker。

ディレクティブ スコープに使用"@"する場合、属性はスコープに文字列として渡されるため、値を単純な引用符で囲まないでください。

また、ドキュメントから、 ng-include が属性として使用されたときに src を使用しないため<div ng-include ng-src="{{template}}"/>、テンプレートをに置き換えました(ただし、最初の例で機能した理由がわかりません...)<div ng-include="template"/>

とにかく役立つことを願っています。

于 2013-08-12T14:46:31.383 に答える