如何使用“ng-repeat"在 Angular JS 指令的模板中? [英] How to use "ng-repeat" within template of a directive in Angular JS?
本文介绍了如何使用“ng-repeat"在 Angular JS 指令的模板中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 Angular JS 的新手,我正在尝试创建一个自定义指令,如下所示:
I'm new to Angular JS and I am trying to create a custom directive that will be used as below:
<div linkslist listcolumns="{{cashAccountsColumns}}"></div>
军团.控制器:
$scope.cashAccountsColumns = [
{"field": "description", "title": "Description"},
{"field": "owner", "title":"Owner"},
{"field": "currentBalance", "title":"Current Balance" }
];
指令代码是:
return {
restrict : 'EA',
transclude : false,
templateUrl : 'html/linkedlist.html',
scope: {
listcolumns: "@"
},
link : function(scope, element, attrs) {
}
}
模板是:
<table class="box-table" width="100%">
<thead>
<tr>
<th scope="col" ng-repeat="column in listcolumns">
{{column.title}}
</th>
</tr>
</thead>
</table>
但这不起作用.我没有在屏幕上获得 column.title 的值,而是向 DOM 添加了如下所示的太多行:
But this is not working. I'm not getting the value of column.title on screen instead too many rows as below are added to DOM:
<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>
推荐答案
传递一个带有属性的整个对象是行不通的,必须使用双向绑定.只需将绑定从 @
更改为 =
并修改下面的 HTML 以使其工作:
Passing an entire object with attribute will not work, you have to use dual way binding. Just change binding from @
to =
and modify the HTML below to make it work:
对指令代码的更改:
// ...
scope: {
listcolumns: "="
},
// ...
对模板的更改:
<div linkedlist listcolumns="cashAccountsColumns"></div>
这篇关于如何使用“ng-repeat"在 Angular JS 指令的模板中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文