5

TL;DR：在这个plunker 上，为什么第二个指令不呈现包含的模板？

这个例子被简化了，但我实际上有一个用例，我将尝试做的事情是有意义的。

我有一个 Angular 指令，它使用 ng-include 使用 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 中对模板的引用是存在的，但它没有被渲染。笨蛋。

那么我的模板在第二个指令中去了哪里？

4

1 回答 1

12

我想我设法通过改变两件事来解决你的问题。在这里看到它：plunker。

当"@"用于指令作用域时，属性作为字符串传递给作用域，因此您不应将值放在单引号之间。

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

希望无论如何都会有所帮助。

于 2013-08-12T14:46:31.383 回答