如何在Angular JS的指令模板中使用“ng-repeat”?

我是新来的Angular JS,我想创build一个自定义指令,将使用如下:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps。 控制器将是:

 $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:

 <th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th> 

使用属性传递整个对象将不起作用,您必须使用双向绑定。 只需将绑定从@更改为=并修改下面的HTML使其工作:

修改指令代码

 // ... scope: { listcolumns: "=" }, // ... 

模板的更改:

  <div linkedlist listcolumns="cashAccountsColumns"></div> 

@ AjayBeniwal的答案是正确的,但我觉得好像它可以使用一些额外的解释。

正如Angular文档指出的(在“隔离指令的范围”一节中), scope选项是一个包含每个隔离区域绑定的属性的对象。 我们使用它从外部范围中分离(隔离)指令中的范围,然后将外部范围映射到指令的内部范围。

scope对象的每个属性的名称对应于指令隔离范围属性。 在问题的例子中, scope对象的唯一属性是listcolumns 。 正因为如此,在创build该指令的html上也必须有相应的属性:

 <div linkedlist listcolumns="cashAccountsColumns"></div> 

scope属性的名称和指令的属性不需要具有相同的名称。 我们可以像这样映射这两个值:

 <div linkedlist short-name="cashAccountsColumns"></div> 

 controller: function ($scope) { $scope.cashAccountsColumns = 'value'; }, scope: { moreDescriptiveName: "=shortName" }, 

对于属性名称与要在指令作用域内绑定的值相同的情况,可以使用以下简写语法:

 <div linkedlist my-name="cashAccountsColumns"></div> 

 controller: function ($scope) { $scope.cashAccountsColumns = 'value'; }, scope: { myName: "=" }, 

另外,在这个例子中,指令属性的值必须对应于指令外部范围的属性。 这是因为= in =shortName使用从外部作用域到隔离范围的属性的双向绑定,强制将该指令属性的值作为expression式求值。 正如这个答案雄辩地指出的,如果我们想要传递一个文字string,我们可以使用@代替= ,或者用双引号和单引号括起指令的隔离作用域属性:

 scope: { moreDescriptiveName: "@" }, 

要么

 <div linkedlist short-name="'cashAccountsColumns'"></div>