AngularJS错误:Template for directive 'XXXXXX'必须只有一个根元素
AngularJS error: Template for directive 'XXXXXX' must have exactly one root element
这是这个问题的后续
我试图建立和HTML <table>
与多个<tr>
行。我希望这些行中的一些由我的指令myDirectiveA
渲染,其他的由我的指令'myDirectiveB'渲染。
下面你可以看到我的文件看起来像什么。如果在文件path/to/myDirectiveA.template.html
中只有一行<tr>
,那么一切都可以正常工作。但是,一旦我在那里添加另一行,我得到以下错误:
`angular.js:13920 Error: [$compile:tplrt] Template for directive 'myDirectiveA' must have exactly one root element. path/to/myDirectiveA.template.html`
好的,所以如果我只允许在模板文件中有一个根元素,那么我怎么能从不同的指令构造我的多行表?其他人解决这个看似常见的用例的方法是什么?
这是我的文件:
main.html:
<div ng-controller="MainCtrl as mainCtrl">
<table width="40%" border="1">
<tbody>
<tr my-directive-a a="mainCtrl.a"></tr>
</tbody>
</table>
</div>
app.js:
myApp.directive('myDirectiveA',function(){
return {
'replace': true,
'restrict': 'A',
'scope': {
'a': '='
},
'controller': 'MyDirectiveACtrl',
'controllerAs': 'MyDirectiveACtrl',
'bindToController': true,
'templateUrl': "path/to/myDirectiveA.template.html"
};
});
myApp.controller('MyDirectiveACtrl', function($scope){
var self = this;
$scope.$watch(function() {return {'a': self.a};}, function (objVal) {},true);
}
);
路径//myDirectiveA.template.html:
<tr>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>
在应用程序中使用
<table width="40%" border="1">
<tbody my-directive-a a="mainCtrl.a">
</tbody>
</table>
指令模板
<tbody>
<tr>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>
<tr>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>
</tbody>
它允许你在指令中只有一个根元素,并在其中添加多个TR。
相关文章:
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- 有什么方法可以在下一个元素上进行追加吗
- 检查一个元素是否有一个类与另一个类总是返回true
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 当一个元素中有绝对定位的子元素时,获取该元素的全宽
- 如果循环中至少有一个元素返回 false,如何将变量设置为 false
- 我在Phaser有一个项目.我想在画布上的元素上做一个用户图像编辑器
- Bootstrap如何知道一个元素是否有popover
- 如果所有单选框在jQuery中都有一个选择,则显示一个元素
- angularjs在一个元素上有两个指令
- 断言一个元素是有重点的
- 有角度的ng重复只显示最后一个元素.如果只有一个元素;我什么也不展示
- 在 CSS 中有一个单独的伪选择器,以显示有关一行中多个元素的信息
- 为什么 Angular 指令只能有一个根元素
- 在 JavaScript 中是否有可能在指定点获取一个元素,如果它不在顶部但实际上可见
- 我有一个函数,我只是想在滚动到特定元素时触发它
- 检测每个函数中是否有一个元素为空
- 如果我有一个元素的x角和y角的位置,我怎么知道元素A是否在元素B中
- 我有一个元素在鼠标悬停时显示,现在我想在鼠标离开时隐藏它.我该怎么做呢?