it-roy-ru.com

Как использовать «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>
50
user2401127

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

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

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

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

  <div linkedlist listcolumns="cashAccountsColumns"></div>
96
Ajay Beniwal

Ответ @ AjayBeniwal правильный, но я чувствую, что он мог бы использовать некоторые дополнительные объяснения. 

Как указывает угловая документация (в разделе «Изоляция области действия директивы»), опция scope - это объект, который содержит свойство для каждой изолированной привязки области действия. Мы используем его, чтобы отделить (изолировать) область видимости внутри директивы от области видимости снаружи, а затем сопоставить внешнюю область с внутренней областью действия директивы.

Имя каждого свойства объекта scope соответствует свойству директив 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 использует двунаправленную привязку атрибутов из внешней области видимости к области изолята, заставляя значение атрибута директивы оценивать как выражение. Как этот ответ красноречиво указывает на то, что если вместо этого мы хотим передать литеральную строку, мы можем либо использовать @ вместо =, либо отсортировать свойство scope изолята директивы как в двойных, так и в одинарных кавычках:

scope: {
     moreDescriptiveName: "@"
},

OR

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