Question

我有一个奇怪的情况，我需要在我的指令中将模板放在模板中。原因是AngularJS不会在属性中读取ng-repeat代码。

在理想的世界中，这就是我的代码的样子：

<div ng-repeat="phone in phones">
   <button popover="<div ng-repeat='friend in phone.friends'>{{friend.name}}</div>"></button>
</div>

不幸的是，由于popover属性的引号，这不起作用。这让我陷入了一个非常深的兔子洞，在那里我试图将模板放在一个模板中，就像在这个玩具中一样：

http://plnkr.co/edit/ZA1uA1UOlU3cCH2mbE0X?p=preview

HTML：

<div my-popover></div>

使用Javascript：

angularApp.directive('myPopover', function( $compile) {
  var getTemplate = function()
  {
      var scope = {title: "other title"}; 
      var template = "<div> test template. title: {{title}}</div> ";
      return $compile(template)(scope); 
  }
    return {
        restrict: 'A',
        template: '<button class="btn btn-default" popover="{{content}}" popover-title="title">template</button>',
        link: function(scope) {
            scope.content = getTemplate();
        }
    };
})

不幸的是，这不起作用，因为AngularJs抱怨循环引用。请帮忙！（这一整天都把我带走了）

Answer 1

我不确定我是否完全理解您要实现的目标，但是从外观您可能需要查看指令的transclude选项。

来自docs：

use transclude：如果要创建包装指令，则为true 任意内容。

如果您使用transclude，则可以将popover内容存储在按钮内，并使用ng-transclude指令将该内容“转发”到您想要的位置。

您的代码看起来像这样：

<button>
    <div ng-repeat='friend in phone.friends'>{{friend.name}}</div>
</button>

您可以在the guide to directives中看到一些实例。

指令内的模板

1 个答案: