javascript - Angular.js 指令嵌入 ngRepeat - 错误

Question

我正在尝试创建图表指令(对现有解决方案不感兴趣)。我想使用 bartemplate 的子指令为每个栏提供可定义的模板.我想迭代 bartemplate所以我想使用 ng-repeat 的模板和 ng-transclude会做的伎俩......而不是 Angular 抛出一个错误。

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指示。我冒昧地进行了简化，但只是让整个 body 充当酒吧的模板而不是 bar-template指令。

因为我们设置了transclude: true barchart 里面的实际内容div 从 dom 中剥离，但通过 transclude 可用您可以通过 $transclude 注入(inject) Controller 的功能范围。我们获取此函数并将其保存在我们的 Controller 中，以便我们稍后可以访问它。

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函数，然后我们可以获得它的 Controller 并访问我们命名为 renderBarTemplate 的存储的 transclude 函数.

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

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

如果您有任何问题或需要进一步说明，请告诉我。

更新:

这是一个让您保留 <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函数并将其存储在父 Controller 中。 (所以它以后可以被 render-bar 指令使用。

另请注意 element.remove() .这不是绝对必要的，只是简单地删除了剩余的 <bartemplate>。来自 html 的标记。