50

私は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>
4

2 に答える 2

0

@AjayBeniwalの答えは正しいですが、追加の説明を使用できるように感じます。

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

オブジェクトの各プロパティの名前は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が外部スコープから分離スコープへの属性の双方向バインディングを使用し、ディレクティブの属性の値が式として評価されるように強制するためです。この回答が雄弁に指摘しているように、代わりにリテラル文字列を渡したい場合は、代わりに使用するか@、=ディレクティブのisolateスコーププロパティを二重引用符と単一引用符の両方で囲むことができます:

scope: {
     moreDescriptiveName: "@"
},

また

<div linkedlist short-name="'cashAccountsColumns'"></div>
于 2016-05-17T02:06:49.767 に答える