角度表行指令不在表内呈现 [英] Angular table row directive not rendering inside table
问题描述
我正在尝试向表中添加一行isrcrow"指令,如下所示:
I am trying to add a row "isrcrow" directive to a table as follows:
<table class="table">
<thead><tr>
<th>Artist Name</th>
<th>Track Title</th>
<th>Version</th>
<th>Track Duration</th>
<th>Recording Year</th>
<th></th>
</tr>
</thead>
<tbody>
<isrcrow></isrcrow>
</tbody>
</table>
这是指令:
(function() {
var isrcorderapp;
isrcorderapp = angular.module("isrcorderapp", []);
isrcorderapp.controller("isrcordercontroller", function($scope, $http) {
return $scope.recordingTypes = [
{
type: 'Single'
}, {
type: 'Album'
}, {
type: 'Live'
}, {
type: 'Concert'
}, {
type: 'Instrumental'
}
];
});
isrcorderapp.directive("isrcrow", function() {
return {
restrict: 'E',
template: '<tr>\
<td><input id="artist" ng-model="name"/></td>\
<td><input id="track"/></td>\
<td><select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\
<td><input id="duration"/></td>\
<td><input id="year"/></td>\
<td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" />\
<input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" />\
</td>\
</tr>',
scope: {
name: '='
},
link: function(scope, element, attr) {}
};
});
}).call(this);
我遇到的问题是 isrcrow 指令没有在表体内部呈现.它呈现在桌子的外面和上面:
The problem I am experincing is the isrcrow directive doesnt render inside the table body. Its rendered outside and above the table:
有谁知道是什么导致了这种行为?
Does anyone knows what could be causing this behaviour?
推荐答案
添加我的评论摘要作为答案,因为它似乎对 OP 有所帮助.:-)
Adding a summary of my comments as an answer since it appeared to have helped the OP. :-)
正如 GregL 指出的那样,在带有 As GregL points out, omitting 但是,对于那些使用 1.2.13 (romantic-transclusion),由于问题 已注意到. However, for those using a version of Angular prior to 1.2.13 (romantic-transclusion), this solution will not be applicable due to an issue that has been noted. 一种解决方法是将指令用作属性(即 A work around would be to instead to use the directive as an attribute (i.e. 这篇关于角度表行指令不在表内呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! 的指令中省略
和 replace: true
限制:'E' 作为根模板节点将导致无效标记,从而导致行的错误呈现.
replace: true
in a directive with restrict: 'E'
and <tr>
as the root template node will result in invalid markup, giving rise to the incorrect rendering of the row.restrict: 'A'
)并适当修改模板,使得 不再是根模板节点.这将允许使用 replace: true
.
restrict: 'A'
) and appropriately modify the template such that <tr>
is no longer the root template node. This will allow replace: true
to be used.
登录
关闭