Несколько директив, запрашивающих шаблоны

У меня есть следующий HTML:

<div style="border:1px solid; height:300px; width:500px; position:relative;  left:100px" id="canvas">
  <tbox ng-repeat="tb in textBoxes" ng-model="tb">
  </tbox>
</div>

И следующие 2 директивы

appModule.directive('resizable', function($compile, $document) {
  return {
    restrict: "A",
    template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude><span class="scale">s</span></div>',
    transclude: true,
    replace: true,
    require: 'ngModel'
  }
});

appModule.directive('tbox', function($document) {
  return {
    restrict: "E",
    template: '<div class="editbox" resizable editoptions>{{tb.text}}</div>',
    replace: true
  }
});

Что именно делает следующая ошибка, которую выбрал angular:

Error: Multiple directives [tbox, resizable] asking for template on: <div class="editbox" resizable="" editoptions="" ng-repeat="tb in textBoxes" ng-model="tb">

jsfiddle at http://jsfiddle.net/sEZM3/

Ответы

Ответ 1

Обе ваши директивы пытаются заменить элемент в dom. Попробуйте удалить строки replace: true в объекте определения директивы.

Ответ 2

Такая же ошибка может возникнуть, если вы попытаетесь загрузить один и тот же код директивы более одного раза по ошибке. Это может произойти, особенно если вы сохраняете каждый элемент Angular (например, директиву) в отдельном файле и включаете в себя все отдельные строки с отдельной строкой. Это был мой случай.

Ответ 3

Для меня это было вызвано множественными копиями директивы и шаблона, существующими в каталоге dist, вызванными зданием grunt без очистки (во время задачи просмотра). Чистый и перестроенный решил это для меня.

Ответ 4

Для меня он включал одну и ту же директиву дважды в index.html.

Ответ 5

Измененная директива неверна. Директива ng-transclude должна быть применена к самому внутреннему элементу, поскольку его содержимое будет отброшено и заменено переданным контентом.

Вы должны окружить шаблон директивы tbox с помощью (исправленной) директивы элемента resizable. Я не знаю, что делает атрибут editoptions, но если он также является директивой, то он также не должен иметь шаблон.

Я имею в виду что-то вроде этого:

appModule.directive('resizable', function($compile, $document) {
    return {
        restrict: "E",
        template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude></div>',
        transclude: true,
        replace: true,
        //...

appModule.directive('tbox', function($document) {
    return {
        restrict: "E",
        template: '<resizable><div class="editbox" editoptions>{{tb.text}}</div></resizable>',
        replace: true,
        //...

Результат:

<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude>
    <div class="editbox" editoptions>{{tb.text}}</div>
</div>

Ответ 6

В моем случае у меня была ссылка на отсутствующий файл в BundleConfig, я удалил ссылку и начал работать.

Ответ 7

Случилось со мной, когда у меня было два компонента с тем же именем (ошибка копирования папок):

Для моего coffeescript, но легко произойдет в чистом angular:

component1.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html1.html',
  controller: 'controler1',
  bindings: {
    somebindings: '<'
  }
});


component2.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html2.html',
  controller: 'controler2',
  bindings: {
    somebindings: '<'
  }
});

Заключение: "имя" должно быть уникальным для всего приложения.

Ответ 8

Это также может быть простая ошибка, как сохранение свойств template и templateUrl в той же директиве.

Ответ 9

(в случае, если это помогает кому-то другому)

Для меня проблема заключалась в наличии файла резервной копии (то есть .bkp.html), который был только старой копией шаблона, который я использовал для справки, - но это было включено кармой, поскольку оно соответствовало ".../**/*. html".

Ответ 10

Для меня в моем коде не было дубликатов. Это произошло из-за того, что я дублировал модуль, чтобы получить головной старт на новом, а затем, используя модуль, найти/заменить и изменить имена файлов.

Даже если больше не было дубликатов, и я остановился и запустил сервер на основе браузеров, ошибка продолжилась.

Решение было выполнено путем удаления каталога .tmp, созданного системой сборки для среды dev.

Очевидно, что генератор FountainJS, который я использую, создает систему сборки, которая в некоторых случаях оставляет грязную директорию .tmp. Это поймало меня несколько раз.

Ответ 11

Для пользователей Visual Studio, использующих TypeScript, это меня достало. Я переименовал свой файл typescript, а встроенный .js файл был в каталоге (но он не отображается в проекте). Мне пришлось показать все файлы в каталоге, чтобы удалить затяжные неиспользуемые файлы *.js.

Ответ 12

импорт одной и той же директивы более одного раза может вызвать эту проблему.