在Angular JS中如何在指令的模板中使用"ng-repeat“？
我是Angular JS的新手，我正在尝试创建一个自定义指令，如下所示：
<div linkedlist 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中添加了太多的行，如下所示：
<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>回答 2
Stack Overflow用户
发布于 2013-05-20 18:20:13
使用属性传递整个对象将不起作用，您必须使用双向绑定。只需将绑定从@更改为=并修改下面的超文本标记语言即可：
对指令代码的更改
// ...
scope: {
listcolumns: "="
},
// ...对模板的更改
<div linkedlist listcolumns="cashAccountsColumns"></div>Stack Overflow用户
发布于 2016-05-17 10:06:50
@AjayBeniwal的答案是正确的，但我觉得它似乎需要一些额外的解释。
正如Angular documentation指出的(在“隔离指令的作用域”一节中)，scope选项是一个对象，它包含每个隔离作用域绑定的属性。我们使用它来分离(隔离)指令内部的作用域和外部的作用域，然后将外部作用域映射到指令的内部作用域。
scope对象的每个属性的名称对应于directives isolate scope属性。在问题的示例中，scope对象的惟一属性是listcolumns。因此，在创建指令的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: "="
},此外，在此示例中，指令的属性值必须与指令的外部作用域的属性相对应。这是因为=shortName中的=使用从外部作用域到隔离作用域的双向属性绑定，强制将指令的属性值作为表达式进行计算。正如this answer雄辩地指出的那样，如果我们想要传递一个文字字符串，我们可以使用@代替=，或者使用双引号和单引号对指令的隔离范围属性进行排序：
scope: {
moreDescriptiveName: "@"
},或
<div linkedlist short-name="'cashAccountsColumns'"></div>https://stackoverflow.com/questions/16646607
复制相似问题