Question

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

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

以下是我的情况：

http://plnkr.co/edit/K4n2Mx3kZyvVYGDyJ7t9

Answer 1

您将ngTransclude置于ngRepeat内，误用了ngRepeat。这是一种鸡/蛋的情况，因为没有什么可以重复，没有任何东西被抄袭。

此外，由于您是在HTML中指定组件，因此模板中甚至不需要template: '<section class="layout">' + '<h4>Before all components</h4>' + '<div ng-transclude></div>' + '<h4>After all components</h4>' + '</section>'。

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

{{1}}

Answer 2

当您使用ng-repeat时，它会创建一个新的范围，并且它使您不能在适当的范围内转换注入转换。

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

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

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

或者，您可以在编译+链接组合中使用transclude函数来获取对被转换的dom的引用并操纵其布局：

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

AngularJS嵌套指令未得到评估

2 个答案: