Как использовать "ng-repeat" в шаблоне директивы в Angular JS?

Я новичок в Angular JS, и я пытаюсь создать настраиваемую директиву, которая будет использоваться ниже:

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

Ответ 1

Передача целого объекта с атрибутом не будет работать, вы должны использовать двустороннюю привязку. Просто измените привязку с @ на = и измените HTML ниже, чтобы заставить его работать:

изменяется на директивный код:

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

изменяется на шаблон:

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

Ответ 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: "="
},


Кроме того, в этом примере значение атрибута директивы должно соответствовать свойству внешней области директивы. Это связано с тем, что = in =shortName использует двунаправленное связывание атрибутов из внешней области с областью выделения, заставляя значение атрибута директивы оцениваться как выражение. Как этот ответ красноречиво указывает, если мы хотим просто передать литеральную строку, мы можем либо использовать @ вместо =, либо сорвать выделение директивы scope с двойными и одинарными кавычками:

scope: {
     moreDescriptiveName: "@"
},

ИЛИ

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