angularjs - AngularJS嵌套指令未得到评估

Question

我刚刚开始创建 Angular 指令（我也是该框架的新手），但遇到了嵌套指令似乎被忽略的问题。我的指令代码的基础是UI Bootstrap 的“选项卡”和“窗格”指令。

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

这是我的情况的一部分：

http://plnkr.co/edit/K4n2Mx3kZyvVYGDyJ7t9

Answer 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>'

Answer 2

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

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

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

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

或者，您可以使用 compile + link 组合中的 transclude 函数来获取对 transcluded dom 的引用并操纵其布局：

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