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

我的案例是一个父指令和多个子指令

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

有谁能帮我找出这段代码的错误，或者提供任何符合我们要求的例子吗

JS Fiddle链接：

角度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;  
});

bosAppModule.directive（'layoutView'，function（$compile）{
var layoutObj={}；
linkFn=功能（范围、元素、属性、控制器）{
控制台日志（“布局：”）；
console.log（scope.layoutData）；
$compile（element.contents（））（范围）；
//var containerString=“Hello container{{containers.containerId}”；
//var compiledElement=$compile（containerString）（范围）；
//元素。追加（compiledElement）；
};
scope={layoutData:'='}；
//layoutObj.transclude='true'；
layoutbj.restrict='E'；
//layoutContainerObj.replace='true'；
LayoutBj.template=“你好布局{{{layoutData.collections.layout.rowSet[0].layoutId}”；
layoutObj.link=linkFn；
返回LAYUTOBJ；
});
指令（'containerView'，函数（$compile）{
var layoutContainerObj={}；
linkFn=功能（范围、元素、属性、控制器）{
$compile（element.contents（））（范围）；
控制台日志（“容器：”）；
console.log（scope.layoutData）；
console.log（scope.containerData）；
};
范围={layoutData:'='}；
//layoutContainerObj.transclude='true'；
layoutContainerObj.restrict='E'；
//layoutContainerObj.replace='true'；
layoutContainerObj.template=“Hello容器{{{containers.containerId}}”；
layoutContainerObj.link=linkFn；
返回布局ContainerObj；
});

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>

我想看看。我认为有相当多的人用较少的语言，以较不复杂的情况提出了这个问题

这是@rgarcia的答案

您的指令需要在使用更高的 优先级，因此当ng repeat克隆元素时，它可以选择您的 修改

“编译/链接分离背后的原因”一节 指令用户指南对ng repeat的工作原理进行了解释

当前ng repeat优先级为1000，因此任何高于此优先级的值都可以 我应该这样做

尝试将

优先级：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;   
});

bosAppModule.directive（'layoutView'，function（$compile）{
var layoutObj={}；
优先权：1001
linkFn=功能（范围、元素、属性、控制器）{
控制台日志（“布局：”）；
console.log（scope.layoutData）；
$compile（element.contents（））（范围）；
//var containerString=“Hello container{{containers.containerId}”；
//var compiledElement=$compile（containerString）（范围）；
//元素。追加（compiledElement）；
};
scope={layoutData:'='}；
//layoutObj.transclude='true'；
layoutbj.restrict='E'；
//layoutContainerObj.replace='true'；
LayoutBj.template=“你好布局{{{layoutData.collections.layout.rowSet[0].layoutId}”；
layoutObj.link=linkFn；
返回LAYUTOBJ；
});

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

Template.html文档

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

创建此指令：

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

指令（'abstractedDirective'，function（）{ 限制：“E”， templateUrl:“path/to/template/foo.html” });

更新您的HTML

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

根据您的JSFIDLE-

加价

<layout-view>
</layout-view>

JS

layoutObj.template=“Hello layout”；

在创建问题之前，请先搜索您的问题。可能存在重复的问题