这是后续这个问题.
我正在尝试构建和 HTML<table>
与多个<tr>
行。我希望其中一些行由我的指令呈现myDirectiveA
以及其他由我的指令“myDirectiveB”呈现的内容。
您可以在下面看到我的文件的样子。如果只有一个,一切正常<tr>
文件中的行path/to/myDirectiveA.template.html
。但是当我在那里添加另一行时,我收到以下错误:
`angular.js:13920 Error: [$compile:tplrt] Template for directive 'myDirectiveA' must have exactly one root element. path/to/myDirectiveA.template.html`
好的,如果我只允许在该模板文件中包含一个根元素,那么如何使用来自各种指令的多行来构造我的表呢?其他人如何解决这个看似常见的用例?
这是我的文件:
主要.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);
}
);
路径/to/myDirectiveA.template.html:
<tr>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>