web-dev-qa-db-ja.com

Angular JSのディレクティブのテンプレート内で "ng-repeat"を使用する方法は？

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>
angularjsangularjs-directiveangularjs-ng-repeat
50
user2401127

属性を持つオブジェクト全体を渡すことは機能しません。デュアルウェイバインディングを使用する必要があります。バインディングを@から=に変更し、以下のHTMLを変更して機能するようにします。

ディレクティブコードへの変更：

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

テンプレートへの変更：

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

@AjayBeniwalの答えは正しいですが、追加の説明が必要なように感じます。

Angular documentation が指摘しているように（「ディレクティブのスコープの分離」セクションで）、scopeオプションは、各分離スコープバインディングのプロパティを含むオブジェクトです。これを使用して、ディレクティブ内のスコープを外部のスコープから分離（分離）し、外部スコープをディレクティブの内部スコープにマップします。

scopeオブジェクトの各プロパティの名前は、ディレクティブisolate scopeプロパティに対応しています。質問の例では、scopeオブジェクトの唯一のプロパティはlistcolumnsです。このため、ディレクティブを作成するhtmlに対応する属性も必要です。

<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: "="
},


さらに、この例では、ディレクティブの属性の値は、ディレクティブの外部スコープのプロパティに対応する必要があります。これは、= in =shortNameは、外部スコープから分離スコープへの属性の双方向バインディングを使用して、ディレクティブの属性の値を強制的に式として評価します。 この答え 雄弁に指摘しているように、代わりにリテラル文字列を渡したい場合は、@ 代わりに =、または二重引用符と単一引用符の両方を使用して、ディレクティブの分離スコーププロパティを囲む：

scope: {
     moreDescriptiveName: "@"
},

OR

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