如何使用“ng-repeat"在 Angular JS 指令的模板中? [英] How to use "ng-repeat" within template of a directive in 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屋！