一个内一个指令在AngularJS中不起作用？

Question

我的情况是一个父指令和许多子指令。

实际上我的要求是想在另一个指令中包含一个。像这样，我们必须使用许多指令。

谁能帮我找出这段代码有什么问题或提供任何符合我们要求的示例。

JS 小提琴链接：http://jsfiddle.net/Lcch85a1/

Angular JS 指令代码

bosAppModule.directive('layoutView',function($compile){
    var layoutObj={};

    linkFn=function(scope, element, attributes, controller) {
        console.log("Layout : ");
        console.log(scope.layoutData);
        $compile(element.contents())(scope);
        //var containerString = "<layoutContainerView layout-data='layoutObject.Data' container-data='containers' ng-repeat='containers in layoutData.collections.container.rowSet'>Hello container  {{containers.containerId}}   </layoutContainerView>";
        //var compiledElement = $compile(containerString)(scope);
        //element.append(compiledElement);
    };
    layoutObj.scope={layoutData:'='};
    //layoutObj.transclude='true';
    layoutObj.restrict='E';
    //layoutContainerObj.replace='true';
    layoutObj.template="<div id='{{layoutData.collections.layout.rowSet[0].layoutId}}' layout-data='layoutObject.Data'>Hello layout     {{layoutData.collections.layout.rowSet[0].layoutId}}</div>";
    layoutObj.link = linkFn;

    return layoutObj;   
});

bosAppModule.directive('containerView',function($compile){
    var layoutContainerObj={};

    linkFn=function(scope, element, attributes, controller) {
        $compile(element.contents())(scope);
        console.log("Container : ");
        console.log(scope.layoutData);
        console.log(scope.containerData);
    };
    layoutContainerObj.scope={layoutData:'='};
    //layoutContainerObj.transclude='true';
    layoutContainerObj.restrict='E';
    //layoutContainerObj.replace='true';
    layoutContainerObj.template="<div >Hello container  {{containers.containerId}} </div>";
    layoutContainerObj.link = linkFn;

    return layoutContainerObj;  
});

HTML 源代码：

<layout-view layout-data='layoutObject.Data'>
    <container-view layout-data='layoutObject.Data' ng-repeat='containers in layoutObject.Data.collections.container.rowSet'></container-view>
</layout-view>

Answer 1

根据您的 JSFiddle - Example

标记

<layout-view>
</layout-view>

JS

layoutObj.template="<div>Hello layout <container-view ></container-view>  </div>";

Answer 2

我会看看here。我想已经有不少人用较少的语言提出了这个问题，情况也不太复杂。

这是来自@rgarcia 的答案...

您的指令需要在 ng-repeat 之前运行，使用更高的 优先级，所以当 ng-repeat 克隆元素时，它可以选择你的 修改。

“编译/链接分离背后的原因”部分来自 指令用户指南解释了 ng-repeat 的工作原理。

当前的 ng-repeat 优先级是 1000，所以任何高于此的 应该这样做。

尝试像这样将priority: 1001 添加到您的指令中...

bosAppModule.directive('layoutView',function($compile){
    var layoutObj={};
    priority: 1001

    linkFn=function(scope, element, attributes, controller) {
        console.log("Layout : ");
        console.log(scope.layoutData);
        $compile(element.contents())(scope);
        //var containerString = "<layoutContainerView layout-data='layoutObject.Data' container-data='containers' ng-repeat='containers in layoutData.collections.container.rowSet'>Hello container  {{containers.containerId}}   </layoutContainerView>";
        //var compiledElement = $compile(containerString)(scope);
        //element.append(compiledElement);
    };
    layoutObj.scope={layoutData:'='};
    //layoutObj.transclude='true';
    layoutObj.restrict='E';
    //layoutContainerObj.replace='true';
    layoutObj.template="<div id='{{layoutData.collections.layout.rowSet[0].layoutId}}' layout-data='layoutObject.Data'>Hello layout     {{layoutData.collections.layout.rowSet[0].layoutId}}</div>";
    layoutObj.link = linkFn;

    return layoutObj;   
});

此外，您可以进一步嵌套指令。我相信这可以抽象出 Angular 何时以及多少次希望将您的自定义 HTML 替换为您正在寻找的功能。 IE。

模板 .html 文档

<custom-tag ng-repeat="..."></custom-tag>

创建此指令：

bosAppModule.directive('abstractedDirective',function(){ 限制：“E”， 模板网址：“路径/到/模板/foo.html” });

更新您的 HTML

<layout-view layout-data='layoutObject.Data'>
    <abstracted-directive></abstracted-directive>
</layout-view>