Question

我有指令container和item。

directive('container', function(){
    return {
        replace: true,
        template: "<div>contains <p>...</p> </div>'
    }
});


directive('item', function(){
    return {
        replace: true,
        template: "item"
    }
});

它们应该像这样使用：

<container>
    <item>
    <item>
    <item>
</container>

预期输出html：

<div>contains <p>item item item </p> </div>

如何从item内容中获取container指令并将其作为可重复的指令代替...在容器模板中？

Answer 1

由于指令模板必须只有一个html根元素，template: "item"无效。它必须至少类似于template: '<span>item</span>'，它产生：

<div>
    contains 
    <p>
        <span>item</span>
        <span>item</span>
        <span>item</span>
    </p>
</div>

这两个指令是：

app.directive('container', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<div>contains <p ng-transclude></p></div>'
  };
});

app.directive('item', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<span>item</span>'
  };
});

plunker

Answer 2

使用transclude: true选项：

directive('container', function(){
    return {
        replace: true,
        transclude: true,
        template: "<div>contains <p ng-transculde></p> </div>'
    }
});

如何访问指令的内部指令

2 个答案: