Как вложить две директивы в один элемент в AngularJS?

Ответ 1

удалите replace: true в директиве по имени 'lw'..

Это также должно решить.

обновленная скрипта: обновленная скрипка

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

Анализ:

что вызвало проблему?

с заменой = true для директивы lw, что происходит: lw имеет выделение области, теперь как replace = true, замененный элемент, который сам изолировал область, был заменен там, поэтому то, что вы неосознанно сделали, вы пытались дать две области для одного и того же элемента списка.

проверка уровня кода в angular.js версия 1.2.1:

строка 5728: function 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, что произошло, вместо новой директивы listie вместо lw, она добавлена ​​в нее, поэтому она является одной изолированной областью, вложенной в другую, что абсолютно правильно и разрешено. область вложенных изолятов похожа на

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

, почему также будет работать упаковка в div (это ваше решение, которое вы считали обходным)?

Следует отметить, что div не является элементом с отдельной областью выделения. Это просто элемент. здесь, на замену, вы прикрепляете область изоляции lw, которая должна быть прикреплена к div. (ПРИМЕЧАНИЕ: сам div не имеет области выделения), поэтому нет 2 изолированных областей изоляции к тому же элементу div. поэтому нет дублирования, поэтому шаг подтверждения прошел, и он начал работать.

Итак, так оно и работает, и определенно это не ошибка.

Ответ 2

Просто ради интереса, у меня была такая же ошибка. Оказалось, потому что я сделал старую "Вырезать и вставить", чтобы создать новую директиву, и у них было одно и то же имя для начала. Я забыл изменить его, что вызвало эту ошибку.

Итак, для любого, кто так же плох, как и я, здесь можно найти возможное решение для проверки.

Ответ 3

Мне удалось исправить это, заменив код шаблона в директиве обертки. Здесь скрипт обновления. Это то, что изменилось.

template: '<div><listie items="items"></listie></div>',
//template: '<listie items="items"></listie>', bug?

Это решает мою проблему, но это похоже на ошибку. Думаю, я создам проблему с Github.

Там - https://github.com/angular/angular.js/issues/5428

Ответ 4

Моя проблема была в том, что я дважды включал файл JS директивы

Ответ 5

Я использовал пример Avengers и после обновления до angular 1.4 я начал получать это. Как оказалось, у него был контроллер и директива, борющаяся за область действия в той же строке

   <div my-directive ng-controller="myController as vm"></div>

Итак, переместите контроллер в отдельную область, чтобы исправить это.

<div my-directive >
<div ng-controller="myController as vm">
</div>
</div> 

Ответ 6

Принятый ответ здесь решил проблему для меня.

По существу удалить выделенную область действия из директивы и вместо этого передать свойство scope через функцию директивной ссылки (в параметре атрибутов).

Ответ 7

В моем случае у меня была директива группы бутстрапов-ui-аккордеона на элементе с ng-repeat:

<accordion-group is-open="status.open" ng-repeat="receipt in receipts">

И решил это, сделав следующее:

<div ng-repeat="receipt in receipts">
    <accordion-group is-open="status.open">