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”

我将此更改为

模板-URL = “的模板 /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，它取代了指令标签＆＃34; cw-clearable-input＆＃34;使用指令的根元素。

Answer 5

如果您的模板中的注释与指令模板中的根元素一起，您将看到相同的错误。

EG。如果您的指令模板具有这样的HTML（使用＆＃34;替换＆＃34;在指令JS中设置为true），您将看到相同的错误

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

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

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

Answer 6

当这对我来说都不起作用时，在List<String> balls = draw("B", 15, 5); btn1B.setText(balls.get(0)); btn2B.setText(balls.get(1)); btn3B.setText(balls.get(2)); btn4B.setText(balls.get(3)); btn5B.setText(balls.get(4));前加上模板路径会修复我的问题。

而不是

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

祝你好运。

Answer 7

检查模板或 templateUrl

templateUrl: 'some/url/here.html'

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

Answer 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
}),

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

8 个答案: