angularjs - 如何在 Angular JS 指令模板中使用 "ng-repeat"？

Question

我是 Angular JS 的新手，我正在尝试创建一个自定义指令，如下所示:

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

军团。 Controller 将是:

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

Answer 1

传递带有属性的整个对象是行不通的，您必须使用双向绑定(bind)。只需将绑定(bind)从 @ 更改为 = 并修改下面的 HTML 即可使其正常工作:

对指令代码的更改:

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

对模板的更改:

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