如何在AngularJS的同一元素上嵌套两个指令？

Question

当我尝试在同一元素上嵌套两个指令时，出现以下错误。 嵌套的“ E”指令-要求新的/隔离范围的多个指令 ，我想嵌套两个“
E”隔离范围的指令，就像这个小提琴一样。（要真正重现该问题，您需要取消注释 指令）

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

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

这不行吗？谢谢！

Answer 1

remove replace： 指令名称为’lw’时为 true ..

那也应该解决。

更新小提琴：更新小提琴

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

分析：

是什么原因引起的？

使用lw指令的replace = true会发生什么事，因为lw具有隔离作用域，现在作为replace =
true，试图将本身具有隔离作用域的替换元素在那里替换，因此您不知不觉中所做的就是尝试为两个作用域提供两个作用域相同元素的listie。

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

第5728行：函数applyDirectivesToNode是在指令上执行编译的函数，在第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清除解决问题？

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

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

为什么在div中包装也可以工作（这是您认为的解决方法）？

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

因此，这就是它设计的工作方式，绝对不是错误。