指令的模板必须只有一个根元素

Question

我是angularJs的新手.我正在尝试创建包含input元素和按钮的新指令.我希望在单击按钮时使用此指令清除输入文本.

当我在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 ) {

    }
};
});

我无法弄清楚如何实现这一目标.

Answer 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>

Answer 2

如果模板的路径不正确,也会发生此错误,在这种情况下,错误是除了说明之外的所有内容.

我从内部引用模板templates/my-parent-template.html(不正确)

模板URL ="子文件夹/我的孩子,template.html"

我把它改成了

template-url =" templates /subfolder/my-child-template.html"

这解决了它.

Answer 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>',

Answer 4

如果您不想创建一个根元素，则可以将replace设置为false。在您的指令中，将其设置为true，这会将指令标签“ cw-clearable-input”替换为指令的根元素。