模板指令必须有一个根元素 [英] Template for directive must have exactly one root element

问题描述

我是新来angularJs。我想创建一个包含输入元素和一个按钮新的指令。我想利用这个指令来清除输入文本按钮被点击时。

I am new to angularJs. I am trying to create new directive which contains input element and a button. I want to use this directive to clear input text when button is clicked.

当我用我的指令，在HTML我得到以下错误：

When I use my directive in html I am getting below error :

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：

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 ) {

    }
};
});

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

I am not able to figure it out how to achieve this.

推荐答案

那么，错误的是pretty解释。您的模板需要有一个根，而你有两个。解决这个最简单的方法是只包装在 DIV 或跨度整个事情：

Well, the error is pretty explanatory. Your template needs to have a single root and yours has two. The simplest way to resolve this would be to just wrap the whole thing in a div or a 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>

这篇关于模板指令必须有一个根元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！