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"/>，因为从documentation开始，ng-include在用作属性时不使用src（但我不明白为什么它在你的第一个例子中起作用...）

希望无论如何都有帮助。

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

1 个答案: