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

【问题标题】：Template for directive must have exactly one root element指令模板必须只有一个根元素
【发布时间】：2015-03-15 13:26:45
【问题描述】：

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

    }
};
});

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

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案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>

【讨论】：

另请参阅@ami91 的回答以获得补充解决方案。

【解决方案2】：

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

我在 templates/my-parent-template.html 中使用（不正确的）引用模板

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

我把它改成了

template-url="模板/subfolder/my-child-template.html"

解决了。

【讨论】：

另外——如果你使用template，而你应该使用templateUrl，它会抛出同样的错误。
另外（至少对于 AngularJS 1.3.2），当我错误地在某个属性值上留下引号时，它给我抛出了这个错误，例如，模板：'

【解决方案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】：

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

【讨论】：

【解决方案5】：

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

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

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

因此，要在您希望保留 cmets 的情况下解决此问题，您需要移动注释，使其位于模板根元素内。

<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】：

我的问题是 webpack 的 HtmlWebpackPlugin 将脚本标记附加到指令内容。这么有棱有角：

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

解决方案是在您的 webpack.config.js 中使用 HtmlWebpackPlugin 的 inject 选项：

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

【讨论】：