指令的模板必须只有一个根元素
Template for directive must have exactly one root element
我是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 ) {
}
};
});
我无法弄清楚如何实现这一目标。
好吧,错误是不言自明的。您的模板需要有一个根,而您的模板有两个根。解决此问题的最简单方法是将整个事情包装在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="subfolder/my-child-template.html"
我把它改成了
template-url="templates/subfolder/my-child-template.html"
解决了它。
只需将您的模板包装在某种东西中:
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>',
如果你不想创建一个根元素,你可以将 replace 设置为 false。在指令中,您将其设置为 true,这会将指令标记"cw-clearable-input"替换为指令的根元素。
如果模板中的注释与指令模板中的根元素一起有注释,则会看到相同的错误。
例如。如果你的指令模板有这样的 HTML(在指令 JS 中将"替换"设置为 true),你将看到同样的错误
<!-- Some Comment -->
<div>
<p>Hello</p>
</div>
因此,要在要保留注释的情况下解决此问题,您需要移动注释,使其位于模板根元素内。
<div>
<!-- Some Comment -->
<p>Hello</p>
</div>
当这些都不适合我时,在模板路径前面加上一个/
解决了我的问题。
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
祝你好运。
检查您的模板或模板网址
templateUrl: 'some/url/here.html'
template: '<div>HTML directly goes here</div>'
我的问题是webpack的HtmlWebpack插件在指令内容中附加了一个脚本标签。所以棱角分明地看到:
<div>stuff</div>
<script type="text/javascript" src="directives/my-directive"></script>
解决方案是在webpack.config中使用HtmlWebpackPlugin的注入选项.js:
new HtmlWebpackPlugin({
template: './src/my-directive.html',
filename: './src/my-directive.html',
inject: false
}),
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- 有什么方法可以在下一个元素上进行追加吗
- 检查一个元素是否有一个类与另一个类总是返回true
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 当一个元素中有绝对定位的子元素时,获取该元素的全宽
- 如果循环中至少有一个元素返回 false,如何将变量设置为 false
- 我在Phaser有一个项目.我想在画布上的元素上做一个用户图像编辑器
- Bootstrap如何知道一个元素是否有popover
- 如果所有单选框在jQuery中都有一个选择,则显示一个元素
- angularjs在一个元素上有两个指令
- 断言一个元素是有重点的
- 有角度的ng重复只显示最后一个元素.如果只有一个元素;我什么也不展示
- 在 CSS 中有一个单独的伪选择器,以显示有关一行中多个元素的信息
- 为什么 Angular 指令只能有一个根元素
- 在 JavaScript 中是否有可能在指定点获取一个元素,如果它不在顶部但实际上可见
- 我有一个函数,我只是想在滚动到特定元素时触发它
- 检测每个函数中是否有一个元素为空
- 如果我有一个元素的x角和y角的位置,我怎么知道元素A是否在元素B中
- 我有一个元素在鼠标悬停时显示,现在我想在鼠标离开时隐藏它.我该怎么做呢?