Angular JS의 지시어 템플릿 내에서 "ng-repeat"을 사용하는 방법은 무엇입니까?

Angular JS의 지시어 템플릿 내에서 "ng-repeat"을 사용하는 방법은 무엇입니까?

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

근데 이거 안 되네.아래 행이 DOM에 추가되었기 때문에 화면에 column.title 값이 표시되지 않습니다.

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>

Atribute를 포함한 오브젝트 전체를 전달할 수 없습니다.듀얼웨이 바인딩을 사용해야 합니다.바인딩을 변경하기만 하면 됩니다.@로.=다음 HTML을 수정하여 작동하도록 합니다.

지시 코드 변경:

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

템플릿 변경:

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

@Ajay Beniwal의 답변은 맞지만, 조금 더 설명이 필요할 것 같습니다.

Angular 문서에서 지적한 바와 같이 ("지침의 범위 분리" 섹션에서)scopeoption은 분리된 각 범위 바인딩의 속성을 포함하는 개체입니다.명령어 내의 스코프를 외부 스코프와 분리(분리)한 후 외부 스코프를 명령어 내부 스코프에 매핑합니다.

의 각 속성 이름scopeobject는 명령어 격리 범위 속성에 대응합니다.질문의 예에서 유일한 속성은scope오브젝트는listcolumns따라서 디렉티브를 작성하는html에 대응하는 Atribut도 존재해야 합니다.

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

의 이름scope단, 속성 및 디렉티브의 속성은 동일한 이름을 가질 필요가 없습니다.이 2개의 값을 다음과 같이 매핑할 수 있습니다.

<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는 외부 스코프에서 격리 스코프로의 Atribute의 양방향 바인딩을 사용하여 디렉티브의 Atribute 값을 식으로서 평가하도록 강제합니다.이 답변이 웅변적으로 나타내듯이, 만약 우리가 문자 그대로의 문자열을 전달하고 싶다면, 우리는 다음을 사용할 수 있습니다.@대신해서=또는 지시문의 격리 범위 속성을 큰따옴표와 작은따옴표로 묶습니다.

scope: {
     moreDescriptiveName: "@"
},

또는

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

언급URL : https://stackoverflow.com/questions/16646607/how-to-use-ng-repeat-within-template-of-a-directive-in-angular-js