Шаблон для директивы должен иметь ровно один корневой элемент

Я новичок в angularJs. Я пытаюсь создать новую директиву, которая содержит элемент ввода и кнопку. Я хочу использовать эту директиву для очистки ввода текста при нажатии кнопки.

Когда я использую свою директиву в html, я становлюсь ниже ошибки:

Error: [$compile:tplrt] Template for directive 'cwClearableInput' must have exactly one root element.

HTML:

<div class="input-group">
         <cw-clearable-input ng-model="attributeName"></cw-clearable-input>
 </div>

clearable_input.js:

angular.module('cw-ui').directive('cwClearableInput', function() {
  return {
    restrict: 'EAC',
    require: 'ngModel',
    transclude: true,
    replace: true,
    template: '<input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span>',
    controller: function( $scope ) {

    }
};
});

Я не могу понять, как этого добиться.

Ответ 1

Ну, ошибка довольно понятна. У вашего шаблона должен быть один корень, а у вас два. Самый простой способ разрешить это - просто обернуть все это в div или span:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',

До:

<input type="text" class="form-control"/>
<span class="input-group-btn">
  <button type="button" class="btn" ng-click="" title="Edit">
    <span class="glyphicon-pencil"></span>
  </button>
</span>

После:

<div>    <!--  <- one root   -->
  <input type="text" class="form-control"/>
  <span class="input-group-btn">
    <button type="button" class="btn" ng-click="" title="Edit">
      <span class="glyphicon-pencil"></span>
    </button>
  </span>
</div>

Ответ 2

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

Я ссылался на шаблон изнутри templates/my-parent-template.html с (неправильным)

шаблонов URL = "подпапка/мой-ребенок-template.html"

Я изменил это на

шаблонах URL = " Шаблоны/subfolder/my-child-template.html"

который решил его.

Ответ 3

Просто оберните свой шаблон:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',

Ответ 4

Если вы не хотите создавать один корневой элемент, вместо него вы можете заменить replace на false. В вашей директиве вы устанавливаете значение true, которое заменяет тег директивы "cw-clearable-input" корневым элементом вашей директивы.

Ответ 5

Если у вас есть комментарий в вашем шаблоне рядом с корневым элементом в шаблоне директивы, вы увидите ту же ошибку.

Например. Если в вашем шаблоне директивы есть такой HTML-код (в директиве JS для "replace" установлено значение true), вы увидите ту же ошибку

<!-- Some Comment -->
<div>
   <p>Hello</p>
</div>

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

<div>
   <!-- Some Comment -->
   <p>Hello</p>
</div>

Ответ 6

Когда это не помогло мне, префикс / к пути шаблона исправил проблему в моем случае.

function bsLoginModal() {
        return {
            restrict: 'A',
            templateUrl:'/app/directives/bootstrap-login-modal/template.html',
            link: linkFunction,
            controller: SignInCtrl,
            controllerAs: 'vm'
        }
    }

вместо

templateUrl:'app/directives/bootstrap-login-modal/template.html

Удачи.

Ответ 7

Проверьте шаблон или templateUrl

templateUrl: 'some/url/here.html'

template: '<div>HTML directly goes here</div>'

Ответ 8

Моя проблема заключалась в том, что веб-пакет HtmlWebpackPlugin добавлял тег скрипта к содержимому директивы. Так что угловатый было видно:

<div>stuff</div>
<script type="text/javascript" src="directives/my-directive"></script>

Решение состоит в том, чтобы использовать опцию HtmlWebpackPlugin inject в вашем webpack.config.js:

new HtmlWebpackPlugin({
  template: './src/my-directive.html',
  filename: './src/my-directive.html',
  inject: false
}),