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

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

当我在html中使用指令时，出现以下错误：

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

html:

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

    }
};
});

angular.module（'cw-ui'）。指令（'cwClearableInput'，function（）{
返回{
限制：“EAC”，
要求：'ngModel'，
是的，
替换：正确，
模板：“”，
控制器：功能（$scope）{
}
};
});

---

我不知道怎样才能做到这一点

只需将模板包装在以下内容中：

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

模板：“”，

嗯，这个错误是不言自明的。您的模板需要有一个根，而您的模板需要有两个根。解决此问题的最简单方法是将整个内容包装在

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>

---

如果模板的路径不正确，也会发生此错误，在这种情况下，错误只是解释性的

我是从

templates/my parent template.html

中引用模板的（不正确）

template url=“子文件夹/my child template.html”

我把这个改成了

模板url=“模板/subfolder/my child template.html”

---

解决了这个问题。

如果不想生成一个根元素，可以将replace设置为false。在您的指令中，您将其设置为true，这将用指令的根元素替换指令标记“cw clearable input”。

当这些都不适用于我时，在模板路径前加一个

/

修复了我的问题

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

而不是

templateUrl:'app/directions/bootstrap login modal/template.html

---

祝你好运。

检查你的模板或模板URL

templateUrl: 'some/url/here.html'

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

templateUrl:'some/url/here.html'
模板：“HTML直接进入此处”

如果在指令模板的根元素旁边的模板中有注释，您将看到相同的错误

例如，如果您的指令模板有这样的HTML（在指令JS中“replace”设置为true），您将看到相同的错误

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

你好

因此，要在希望保留注释的场景中解决此问题，需要移动注释，使其位于模板根元素内

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

你好

我的问题是Web包的HtmlWebpackPlugin在指令内容中附加了一个脚本标记。所以我看到：

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

---

另外-如果您在应该使用

templateUrl

时使用

templateUrl

，则会引发相同的错误。此外（至少对于AngularJS 1.3.2而言），当我错误地在一个属性值上留下引号时，也会引发此错误，例如，template:“这是我的情况-感谢您的回答！有关补充解决方案，请参见@ami91的答案。

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

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