如何在AngularJS的同一元素上嵌套两个指令? [英] How to nest two directives on the same element in AngularJS?

问题描述

当我尝试在同一元素上嵌套两个指令时，出现以下错误. 嵌套的"E"指令-多个指令要求新的/隔离的范围， 我想嵌套两个"E"隔离范围的指令，例如此小提琴. (要真正重现该问题，您需要取消注释< lw>指令)

When I try to nest two directives on the same element I get the following error. Nested "E" directives - Multiple directives [...] asking for new/isolated scope, I want to nest two "E" isolated scoped directives, like in this fiddle. (To actually reproduce the problem, you need to uncomment the <lw> directive)

我不断收到我不了解/不知道如何解决的错误:

I keep getting this error that I don't understand/know how to fix:

Error: [$compile:multidir] Multiple directives [lw, listie] asking for new/isolated scope on: <listie items="items items">

这不行吗? 谢谢！

推荐答案

删除名称为'lw'的指令上的 replace:true ..

remove replace: true on the directive by name 'lw' ..

那也应该解决.

更新小提琴:更新小提琴

app.directive('lw', function(){
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        template: '<listie items="items"></listie>',
        controller: function($scope) {
        }
    }
});

分析:

是什么原因引起的?

对于lw指令使用replace = true，发生的情况是lw具有隔离范围，现在作为replace = true，试图将本身具有隔离范围的替换元素在那里替换，因此您不知不觉中所做的就是尝试给出同一元素列表的两个作用域.

with replace=true for the lw directive what happens is lw has isolate scope, now as replace=true , the replaced element which itself has isolate scope was tried to be replaced there, so what you unknowingly did is you tried to give two scopes for the same element listie.

angular.js版本1.2.1中的代码级观察:

第5728行:函数applyDirectivesToNode是在指令上执行编译的函数，在第5772行中，如果我们试图分配重复的作用域或换句话说，将相同的元素分配给两个作用域，则它们执行此检查.

line 5728 : function applyDirectivesToNode is the function that executes compile on directive and here in line 5772 they do this checking if we are trying to assign duplicate scope or in other words same element with two scopes .

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

上面的

是执行该功能的函数，如果试图将两个范围分配给同一元素，它将抛出该错误. 因此，这就是它的设计目标，而不是错误.

above is the function which does that check and if in case there is an attempt to assign two scopes to same element it flings that error . So this is how it is designed to be and not a bug .

为什么用replace:true删除解决问题?

通过删除replace:true发生了什么事，而不是替换了新的指令listie而不是lw，它被附加到其中，因此这是一个嵌套到另一个隔离范围中，这是绝对正确和允许的. 嵌套的隔离范围就像

by removing replace:true what happened is instead of new directive listie replaced instead of lw , it got appended into it , so it is one isolated scope nested into other, which is absolutely correct and allowed . the nested isolate scope is like

<lw items="items" class="ng-isolate-scope">
   <div items="items" class="ng-isolate-scope">
        ..........
   </div>
</lw>

为什么在div中换行也可以工作(这是您认为可以解决的方法)?

需要注意的一点是，div不是具有单独隔离范围的元素，它只是一个元素. 在replace上，您正在将lw的隔离范围附加到div上. (注意:div本身没有隔离范围)，因此没有附加2个隔离范围 到同一元素div. 因此没有重复，因此断言步骤已通过并开始工作.

The point to be noted is that the div is not an element with a separate isolate scope .It is just an element. here on replace you are attaching the isolate scope of lw to be attached to a div . (NOTE : The div by itself does not have an isolate scope ), so there is no 2 isolate scopes attached to same element div . so there is no duplication so the assert step passed and it started working .

所以这就是它设计的工作方式，而且绝对不是错误.

So this is how it is designed to work and definitely its not a bug .

这篇关于如何在AngularJS的同一元素上嵌套两个指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！