it-roy-ru.com

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

У меня есть следующий 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/

34
goh

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

29
Jason

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

24
Wojciech Majerski

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

12
arieljake

Для меня это была одна и та же директива дважды в index.html.

6
MAhsan

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

3
malckier

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

Для моего кофе, но легко в чистом виде:

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

Вывод: «имя» должно быть уникальным во всем приложении.

2
Rafał

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

Вы должны окружить шаблон директивы tbox директивой (исправленной) resizable element. Я не знаю, что делает 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>
2
Adam

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

1
Francisco G

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

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

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

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

1
shanemgrey

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

0
Rouche

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

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

0
wdanda

У вас не может быть одной директивы (элемента) direct, ссылающейся на другую директиву (элемента). Оберните его <div>, например:

template: '<div><my-custom-directive>'
        + '</my-custom-directive></div>'

См. https://github.com/angular/angular.js/issues/5428 для получения дополнительной информации.

0
Tom Söderlund