Angular.js指令包含ngRepeat-错误

Question

我正在尝试创建一个图表指令（对现有解决方案不感兴趣）。 我想使用bartemplate的子指令为每个栏定义模板。 我想遍历bartemplate所以我认为使用带有ng-repeat和ng-transclude bartemplate的模板可以解决问题……相反，角度引发了错误。

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-repeat="bar in bars track by $index" ng-transclude="" class="ng-scope">

http://jsfiddle.net/jt4Y2/7/

所以您可能会问，为什么要包含在内？ 我希望能够包含我添加到图表中的任何元素（即标签），并且不干扰<bartemplate> 。

Answer 1

您的代码有几个问题。 首先，通过在包含范围内的包含范围内进行包含范围的包含操作来使它复杂化。 其次，您要组合已经进行了诸如ng-repeat之类的转写的指令，并尝试在其中进行转写，而这将是行不通的。

我提供了您想要的代码的简化版本：

http://jsfiddle.net/jt4Y2/6/

让我尝试解释它在做什么。 首先，我们有barchart指令。 我采取了简化的自由，但只是使整个主体充当条形模板，而不是具有bar-template指令。

因为我们设置了barchart transclude: true所以将barchart div中的实际内容从dom中剥离，但是通过transclude函数可以使用，您可以通过$transclude参数将其注入到控制器中。 我们采用此功能并将其保存在我们的控制器上，以便以后可以使用它。

然后，将barchart指令替换为以下模板：

<div xmlns="http://www.w3.org/2000/svg">
    <div ng-repeat="bar in bars track by $index" render-bar></div>
 </div>

请注意，没有ng-transclude 。 取而代之的是，我们创建自己的指令render-bar来渲染模板（这避免了与ng-repeat冲突以及它自己的包含）。

renderBar指令非常简单：

directive('renderBar', function(){
    return {
      require: '^barchart',
      link: function(scope, element, attrs, controller){
        controller.renderBarTemplate(scope, function(dom){              
          element.append(dom);
        });
      }
  }
});

首先，我们要求有一个父级barchart指令。 然后，在link函数中，我们可以获取其控制器并访问存储的renderBarTemplate函数（我们将其命名为renderBarTemplate 。

我们传递的第一个参数是作用域，它使函数链接到当前作用域（基本上是ng-repeat提供的作用域，它使我们能够访问包括bar在内的迭代变量）。

编译后的dom通过a回调（第二个参数）返回，然后我们可以将其附加到ng-repeat提供的<div> 。

如果您有任何疑问或需要其他说明，请告诉我。

更新 ：

<bartemplate>您保留<bartemplate>指令的版本：

http://jsfiddle.net/jt4Y2/10/

我添加了bartemplate指令：

directive('bartemplate', function(){
  return {
    transclude: true,
    restrict: 'E',
    require: '^barchart',
    link: function(scope, element, attrs, barChartController, transclude){
        element.remove();
        barChartController.renderBarTemplate=transclude;
    } 
  };
})

现在，它负责执行其transclude函数并将其存储在父级的控制器中。 （因此以后可以由render-bar指令使用它。

还要注意element.remove() 。 这不是绝对必要的，而只是从html中删除了剩余的<bartemplate>标记。