如何在AngularJS的同一个元素上嵌套两个指令?
当我尝试嵌套在同一个元素上的两个指令时,我得到以下错误。
嵌套“E”指令 – 多个指令[…]请求新的/孤立的范围, 我想嵌套两个“E”隔离的范围指令,如 this fiddle。 (要实际重现问题,您需要取消注释< lw>指令) 我不断收到这个错误,我不明白/知道如何解决: Error: [$compile:multidir] Multiple directives [lw,listie] asking for new/isolated scope on: <listie items="items items"> 这不是应该工作吗?
删除替换:在指令上的名称’lw’。
这也应该解决。 更新小提琴:updated fiddle app.directive('lw',function(){ return { restrict: 'E',scope: { items: "=" },template: '<listie items="items"></listie>',controller: function($scope) { } } }); 分析: 是什么原因导致的问题? 对于lw指令,replace = true lw有隔离范围,现在作为replace = true,被替换的元素本身有隔离范围被试图在那里被替换,所以你不知不觉做的是你试图给两个范围相同的元素listie。 angular.js版本1.2.1中的代码级观察: 行5728:function applyDirectivesToNode是在指令上执行compile的函数,这里在行5772,他们这样做检查,如果我们试图分配重复作用域或换句话说同样的元素与两个作用域。 function assertNoDuplicate(what,previousDirective,directive,element) { if (previousDirective) { throw $compileMinErr('multidir','Multiple directives [{0},{1}] asking for {2} on: {3}',previousDirective.name,directive.name,what,startingTag(element)); } } 上面是执行该检查的函数,如果试图将两个范围分配给同一个元素,它会抛出该错误。 为什么replace:true remove解决了问题? 通过删除replace:true发生了什么事情,而不是新的指令listie而不是lw,它被附加到它,所以它是一个孤立的范围嵌套到其他,这是绝对正确和允许。 <lw items="items" class="ng-isolate-scope"> <div items="items" class="ng-isolate-scope"> .......... </div> </lw> 为什么包装在一个div也将工作(这是你认为解决方案的解决方案)? 要注意的一点是,div不是一个具有单独隔离范围的元素。它只是一个元素。 所以这是它的设计工作,它绝对不是一个错误。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |