如何让ng repeat在指令模板中工作
How to get ng-repeat to work inside of a directives template
问题:编译语法{{vm.names}}会吐出变量,所以我知道视图可以访问它。然而,在像ng-reeat这样的指令中使用vm.name没有效果。我做了一个console.log(typeof()),上面写着"object",所以我知道它不是字符串。
代码:
function nameDirective (){
return {
template: [
'{{vm.names}}',
'<tr ng-repeat"name in vm.names">',
'<td>{{name.id}}</td>',
'<td>{{name.fName}}</td>',
'<td>{{name.lName}}</td>',
'</tr>'
].join(''),
"scope":{
names:"="
},
"controller": nameDirectiveCtrl,
"controllerAs": 'vm'
};
}
function nameDirectiveCtrl($scope) {
var vm = this;
vm.names = $scope.names;
}
Demohttp://plnkr.co/edit/6vlqXFshSxPe5b3Wu7mf?p=preview
首先请注意,ng-repeat"name in vm.names"
中缺少=
。但这并不是真正的问题。
另一个问题是,如果使用<name-directive names="vm.names"></name-directive>
,则需要添加restrict: 'E'
。但这也不会带来任何效果。
之后我意识到你也需要replace: true
。在这种情况下,ngRepeat
将工作,但奇怪。。。行将出现在表外!
http://plnkr.co/edit/y8Wr2j1mLc3UFvFKo7IB?p=preview
嗯。。这就是解决方案。
当您应该使用仅限于注释的指令时,这种情况非常罕见。当前方法的问题是<name-directive>
元素不能是tbody
的直接子元素,所以浏览器修复了将元素指令移动到外部其他地方的无效标记。
以下是带有注释语法的固定指令代码:
<table>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<!-- directive: name-directive vm.names -->
</tbody>
</table>
指令看起来像:
function nameDirective() {
return {
restrict: 'M',
template: [
'<tr ng-repeat="name in vm.names">',
'<td>{{name.ID}}</td>',
'<td>{{name.fName}}</td>',
'<td>{{name.lName}}</td>',
'</tr>'
].join(''),
scope: {
names: "=nameDirective"
},
replace: true,
controller: nameDirectiveCtrl,
controllerAs: 'vm'
};
}
演示:http://plnkr.co/edit/qTII5HdZP1gXKKZjOXTu?p=preview
相关文章:
- JavaScript指令不能像我想象的那样工作
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- AngularJS指令意外地协同工作
- 角度控制器功能赢得'不按指令工作
- 角度指令中的模糊无法正常工作
- 带有Angular指令的HTML;附加时无法工作
- 角度控制器功能不;在指令内部调用时,似乎无法始终如一地工作
- 如何使Angular JS控制器与指令一起工作
- AngularJS Dropdown在使用指令后不再工作
- 使用 Angular 和 UI-bootstrap 对模态事件绑定无法工作的指令
- 角度指令和属性Don'在控制器内创建和设置时无法工作
- 指令中的指令-手表不工作
- 超链接;编译angular指令内的模板后无法工作
- 如何让ng repeat在指令模板中工作
- AngularJS:指令没有启动或工作
- $render在角度1.2.2停止工作(文件验证指令)
- 部分html视图's控制器未使用KendoPanelBar内容URL在指令模板URL中工作
- 角度控制器的作用是什么;t控制器'他的工作由指令来完成
- Typescript$inject$timeout到指令中..在控制器中工作,而不是在链接中
- AngularJS:拆分到新文件时不调用工作指令