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

Question

我是 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>

- user2401127

---

如果你发现 @Ajay Beniwal 的回答有用，为什么不将其标记为答案呢？ - superjos

原帖发布后，原作者似乎没有回来过。 - taco

Answer 1

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

更改指令代码：

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

模板的变更：

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

- Ajay Beniwal

Answer 2

@AjayBeniwal的回答是正确的，但我觉得它需要一些额外的解释。

正如Angular文档所指出的（在“隔离指令作用域”部分），scope选项是一个对象，其中包含每个隔离作用域绑定的属性。我们使用它来将指令内部的作用域与外部作用域分离（隔离），然后将外部作用域映射到指令的内部作用域。

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>

- Zach Olivare