Javascript 指令模板必须只有一个根元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27992470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Template for directive must have exactly one root element
提问by Vish021
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.
我是 angularJs 的新手。我正在尝试创建包含输入元素和按钮的新指令。我想使用此指令在单击按钮时清除输入文本。
When I use my directive in html I am getting below error :
当我在 html 中使用我的指令时，出现以下错误：
Error: [$compile:tplrt] Template for directive 'cwClearableInput' must have exactly one root element.
html:
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.
我无法弄清楚如何实现这一目标。
回答by JLRishe
Well, the error is pretty self-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 divor a span:
嗯，这个错误是不言自明的。您的模板需要有一个根，而您的模板有两个。解决此问题的最简单方法是将整个内容包装在 adiv或 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>',
Before:
前：
<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>
After:
后：
<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>
回答by Frederik Struck-Sch?ning
This error will also occur if the path to the template is incorrect, in which case the error is everything but explanatory.
如果模板的路径不正确，也会发生此错误，在这种情况下，错误只是解释性的。
I was referring the template from within templates/my-parent-template.htmlwith the (incorrect)
我是从内部引用模板templates/my-parent-template.html的（不正确）
template-url="subfolder/my-child-template.html"
template-url="子文件夹/my-child-template.html"
I changed this to
我把这个改成
template-url="templates/subfolder/my-child-template.html"
template-url="模板/子文件夹/my-child-template.html"
which solved it.
这解决了它。
回答by Kostya Shkryob
Just wrap your template in something:
只需将您的模板包装在一些东西中：
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>',
回答by jgerstle
If you don't want to make one root element you can instead set replace to false. In your directive you are setting it to true, which replaces the directive tag "cw-clearable-input" with the root element of your directive.
如果您不想创建一个根元素，您可以将replace 设置为false。在您的指令中，您将其设置为 true，这将用指令的根元素替换指令标签“cw-clearable-input”。
回答by ami91
If you have a comment in your template alongside the root element in the directive template, you will see the same error.
如果您在模板中的指令模板中的根元素旁边有注释，您将看到相同的错误。
Eg. If your directive template has HTML like this (with "replace" set to true in the directive JS), you will see the same error
例如。如果您的指令模板具有这样的 HTML（在指令 JS 中将“replace”设置为 true），您将看到相同的错误
<!-- Some Comment -->
<div>
<p>Hello</p>
</div>
So to resolve this in scenarios where you want to retain the comments you will need to move the comment so that it is inside the template root element.
因此，要在要保留注释的情况下解决此问题，您需要移动注释，使其位于模板根元素内。
<div>
<!-- Some Comment -->
<p>Hello</p>
</div>
回答by Greg
My problem was that webpack's HtmlWebpackPlugin was appending a script tag to the directive content. So angular was seeing:
我的问题是 webpack 的 HtmlWebpackPlugin 将脚本标记附加到指令内容。所以角度是看到：
<div>stuff</div>
<script type="text/javascript" src="directives/my-directive"></script>
The solution is to use HtmlWebpackPlugin's injectoption in your webpack.config.js:
该解决方案是使用HtmlWebpackPlugin的注入选项，您webpack.config.js：
new HtmlWebpackPlugin({
template: './src/my-directive.html',
filename: './src/my-directive.html',
inject: false
}),
回答by Akash
When none of this worked for me, prefixing a /to the template pathfixed the issue in my case.
当这些都不适合我时，在/模板路径前加上前缀 a解决了我的问题。
function bsLoginModal() {
return {
restrict: 'A',
templateUrl:'/app/directives/bootstrap-login-modal/template.html',
link: linkFunction,
controller: SignInCtrl,
controllerAs: 'vm'
}
}
instead of
代替
templateUrl:'app/directives/bootstrap-login-modal/template.html
templateUrl:'app/directives/bootstrap-login-modal/template.html
Good Luck.
祝你好运。
回答by KimchiMan
Check your templateor templateUrl
检查您的模板或templateUrl
templateUrl: 'some/url/here.html'
template: '<div>HTML directly goes here</div>'
