AngularJS嵌套指令未得到评估答案

【问题标题】：AngularJS nested directive not getting evaluatedAngularJS嵌套指令未得到评估
【发布时间】：2013-05-04 07:42:41
【问题描述】：

我刚刚开始创建 Angular 指令（我也是该框架的新手），但遇到了嵌套指令似乎被忽略的问题。我的指令代码的基础是 UI Bootstrap's "tabs" 和 "pane" 指令。

要点是我希望能够在“布局”中编译“组件”列表。最终，每个“组件”标签上还应该有一个属性，该属性将指示布局从某个已知模板位置呈现内容。然而，现在，我什至无法触发组件指令中的“链接”函数，即使我的模板中有两个组件。

这是我的情况：

http://plnkr.co/edit/K4n2Mx3kZyvVYGDyJ7t9

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您将ngTransclude 放在ngRepeat 中，从而误用了它。这是一种先有鸡还是先有蛋的情况，因为没有什么可重复的，所以没有什么可以嵌入的。

此外，由于您在 HTML 中指定组件，因此您甚至不需要在模板中使用 ngRepeat。

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

template:
  '<section class="layout">' +
    '<h4>Before all components</h4>' +
    '<div ng-transclude></div>' +
    '<h4>After all components</h4>' +
  '</section>'

【讨论】：

D'oh，回顾一下 UI Bootstrap 的代码，他们确实在循环之外有 ngTransclude 指令（他们只是使用 ngRepeat 指令在每个窗格上方显示选项卡列表） .感谢您的帮助！

【解决方案2】：

当您使用 ng-repeat 时，它会创建一个新的范围，并且会使您 ng-transclude 不在注入嵌入的正确范围内。

因此，当您删除 ng-repeat 时，您会得到渲染的组件。

现在，为了控制布局，您可以像添加范围一样将元素添加到控制器中，然后在控制器中进行相应的布局：

// inside the controller
this.addComponentElement = function (componentElement) {
  componentElements.push(componentElement);
};
// watch for array changes and handle layout

或者，你可以使用编译+链接组合中的transclude函数来获取对transcluded dom的引用并操作其布局：

  compile:function(telement, tAttrs, transcludeFn){
    return function(scope, element, attrs){
      transcludeFn(scope, function(transcludedDom){
        // layout the transcludedDom
      })
    }

【讨论】：