48

こちらの例をご覧ください 

foodMeApp.directive('fmRating', function() {
  return {
    restrict: 'E',
    scope: {
      symbol: '@',
      max: '@',
      readonly: '@'
    },
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      attrs.max = scope.max = parseInt(scope.max || 5, 10);
...

Angularは、親スコープからアクセスするために、分離されたスコープオブジェクトで定義する必要がsymbolありますmax。readonly

ここで使用されます

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

それで、目的はattrs何ですか？を通過したすべての属性にアクセスすることはできませんattrs。attrs.max代わりにmaxの1つのアクセス値を使用できないのはなぜですかscope.max

なぜのように割り当てるのattrs.max = scope.maxですか？

このアプリはAngularの作者によって書かれているので、私は理由を期待しています。

ありがとう。

4

2 に答える 2

95

attrsの目的は何ですか？

ディレクティブと同じ要素で定義された属性には、いくつかの目的があります。

  1. これらは、分離スコープを使用するディレクティブに情報を渡す唯一の方法です。ディレクティブ分離スコープは通常、親スコープから継承しないため、分離スコープに渡すものを指定する方法が必要です。したがって、「オブジェクトハッシュ」の「@」、「=」、および「＆」には、渡されるデータ/情報を指定するための属性がそれぞれ必要です。
  2. これらは、双方向の通信メカニズムとして機能します。（たとえば、独立したAngularJSディレクティブ間の通信を独立して管理する）
  3. それらは属性名を正規化します。

attrsを介して渡されたすべての属性にアクセスすることはできませんか？

はい、できますが

  1. データバインディングはありません。
    '@'は一方向の「文字列」データバインディングを設定します（親スコープ→ディレクティブ分離スコープ）@を使用すると、ディレクティブで表示/取得する値は常に文字列であるため、ディレクティブに反対します。
    '='は、双方向のデータバインディングを設定します（親スコープ↔ディレクティブ分離スコープ）。
    データバインディングがないと、ディレクティブはモデル/データの変更を自動的に$watchまたは$observeできません。
  2. sを含む属性値は{{}}補間されないため、問題が発生します。
    が<my-directive name="My name is {{name}}">あり、親スコープに。があるとします$scope.name='Mark'。次に、リンク関数内で、console.log(attrs.name)結果はundefined。
    nameが「@」で定義された分離スコーププロパティである場合、attrs.$observe('name', function(val) { console.log(val) })結果は。になりMy name is Markます。（リンク関数内では、補間された値を取得するために$observe（）を使用する必要があることに注意してください。）

maxの1つのアクセス値をscope.maxではなくattrs.maxとして使用できないのはなぜですか

上で答えた

attrs.max = scope.maxのように割り当てるのはなぜですか？

これを行うために私が考えることができる唯一の理由は、他のディレクティブがこの属性/値を確認する必要がある場合（つまり、ディレクティブ間通信）です。ただし、これを機能させるには、他のディレクティブをこのディレクティブの後に実行する必要があります（priorityディレクティブ設定である程度制御できます）。

要約：分離スコープを持つディレクティブでは、通常はを使用しませんattrs。（初期化データ/値をディレクティブに送信する方法である可能性があると思います。つまり、これらの値のデータバインディングが不要で、補間が必要ない場合です。）

于 2013-01-14T16:44:22.740 に答える
3

属性を使用すると、次のようなhtmlタグで定義された属性にアクセスできます。

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true">

したがって、この場合、シンボル属性と読み取り専用属性にアクセスできます。カスタムディレクティブで定義したすべての属性は、attrs変数で使用できます。

ブロック：

attrs.max = scope.max = parseInt(scope.max || 5, 10);

現在のscope.max値または存在しない場合は5を解析し、 scope.maxおよびattrs.maxに割り当てます。このように、割り当て後、attrs.maxから読み取ることができます。その前は、未定義のattrs.maxプロパティです。

fmRating.jsソースを調べると、このコードが使用されている理由/場所/時期がわかりません。

于 2013-01-13T12:06:17.893 に答える