在嵌套的角度指令中使用ng-transclude和ng-include

Question

TL; DR:在这个plunker上,为什么第二个指令不会渲染包含的模板？

这个例子是简化的,但实际上我有一个用例来做我想要尝试的事情是有道理的.

我有一个使用ng-include的Angular指令,使用ng-include和ng-transclude将提供的模板包装到其他HTML中.它本身很好用.

.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中对模板的引用是存在的,但它没有被渲染.Plunker.

那么我的模板在第二个指令中的位置是什么？

Answer 1

我想我通过改变两件事来解决你的问题.在这里看到:plunker.

当"@"用于指令范围时,该属性将作为字符串传递给范围,因此不应将值放在简单引号之间.

另外,我<div ng-include ng-src="{{template}}"/>在模板中替换了<div ng-include="template"/>因为从文档中,ng-include在用作属性时不使用src(但我不明白为什么它在你的第一个例子中起作用...)

希望无论如何都有帮助.