指令模板必须只有一个根元素 [英] Template for directive must have exactly one root element
问题描述
我是 angularJs 的新手.我正在尝试创建包含输入元素和按钮的新指令.我想使用此指令在单击按钮时清除输入文本.
当我在 html 中使用我的指令时,出现以下错误:
错误:[$compile:tplrt] 指令cwClearableInput"的模板必须正好有一个根元素.
html:
<cw-clearable-input ng-model="attributeName"></cw-clearable-input>
clearable_input.js:
angular.module('cw-ui').directive('cwClearableInput', function() {返回 {限制:'EAC',要求:'ngModel',转置:真实,替换:真的,模板:'<input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="编辑"><span class="glyphicon-pencil"></span></button></span>',控制器:函数($scope){}};});
我无法弄清楚如何实现这一目标.
嗯,这个错误是不言自明的.您的模板需要有一个根,而您的模板有两个.解决此问题的最简单方法是将整个内容包装在 div
或 span
中:
模板:'<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="编辑"><span class="glyphicon-pencil"></span></button></span></div>',
之前:
<span class="input-group-btn"><button type="button" class="btn" ng-click="" title="编辑"><span class="glyphicon-pencil"></span>按钮></span>
之后:
<!-- <- 一个根--><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="编辑"><span class="glyphicon-pencil"></span>按钮></span>
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.
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:
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.
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 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>',
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>
这篇关于指令模板必须只有一个根元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!