Question

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

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

任何人都可以帮我找出此代码的错误，或提供符合我们要求的任何示例。

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

我会看看here。我想很少有人用较少的语言提出这个问题，而且情况不那么复杂。

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

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

部分＆＃34;编译/链接分离背后的原因＆＃34;来自   指令用户指南解释了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的时间和次数。 I.E.

模板.html文档

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

制定本指令：

bosAppModule.directive（＆＃39; abstractedDirective＆＃39;，函数（）{ 限制：＆＃34; E＆＃34;， templateUrl：＆＃34; path / to / template / foo.html＆＃34; }）;

更新您的HTML

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

Answer 2

根据您的JSFiddle - Example

标记

$ch = curl_init("http://domain/blah/foo\r\nbar");

JS

<layout-view>
</layout-view>

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

2 个答案: