web-dev-qa-db-ja.com

カスタムディレクティブのスコープバインディングでの記号 '@'、 '＆'、 '='および '>'の使用

AngularJSでカスタムディレクティブを実装する際にこれらのシンボルを使用する方法についてはよく読んでいますが、その概念はまだ私には明らかではありません。つまり、カスタムディレクティブでスコープ値の1つを使用するとどうなりますか？

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

ここでの範囲で正確には何をしているのでしょうか。

"scope： '>'" が公式文書に存在するかどうかもわかりません。私のプロジェクトで使われています。

編集-1

"scope： '>'" の使用は私のプロジェクトの問題であり、それは修正されました。

angularjsangularjs-directiveangularjs-scope
136
MAC

AngularJSディレクティブでは、有効範囲によって、ディレクティブが適用される要素の属性内のデータにアクセスできます。

例を挙げて説明します。

<div my-customer name="Customer XYZ"></div>

ディレクティブの定義

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

scopeプロパティが使用されている場合、ディレクティブはいわゆる "独立スコープ"モードになります。つまり、親コントローラのスコープに直接アクセスできません。

非常に簡単に言うと、結合記号の意味は次のとおりです。

someObject: '='（双方向データバインディング）

someString: '@'（直接または二重中括弧表記{{}}を使用した内挿を通じて渡される）

someExpression: '&'（例：hideDialog()）

この情報は AngularJSディレクティブのドキュメントページ にありますが、ページ全体に多少広がっています。

シンボル>は構文の一部ではありません。

ただし、<は AngularJSコンポーネントバインディング の一部として存在し、一方向バインディングを意味します。

105
VRPF

>はドキュメントにありません。

<は一方向バインディングです。

@バインディングは文字列を渡すためのものです。これらの文字列は補間値のための{{}}式をサポートします。

=バインディングは双方向モデルバインディング用です。親スコープ内のモデルは、ディレクティブの独立スコープ内のモデルにリンクされています。

&バインディングは、ディレクティブ内でメソッドを呼び出すことができるように、メソッドをディレクティブのスコープに渡すためのものです。

Scope：trueをディレクティブで設定しているとき、Angular jsはそのディレクティブの新しいスコープを作成します。つまり、ディレクティブスコープに加えられた変更は、親コントローラには反映されません。

158
Aravind

<一方向バインディング

=双方向バインディング

&関数バインディング

@は文字列のみを渡す

31
Timothy.Li

カスタマーディレクティブを作成すると、ディレクティブのスコープはIsolatedスコープになります。つまり、ディレクティブはコントローラとスコープを共有しません。ディレクティブとコントローラの両方に独自のスコープがあります。ただし、3つの方法でデータをディレクティブスコープに渡すことができます。

  1. データは、@文字列リテラルを使用して文字列として渡すことができ、文字列値を渡します。一方向バインディング。
  2. =文字列リテラルを使用してデータをオブジェクトとして渡すことができます。
  3. データは&文字列リテラルの関数として渡すことができ、外部関数を呼び出し、ディレクティブからコントローラにデータを渡すことができます。
3
Bac Nguyen

ディレクティブに関する AngularJSのドキュメント は、記号の意味について非常によく書かれています。

明確にするために、あなただけが持つことはできません

scope: '@'

ディレクティブ定義内。次のように、これらのバインディングが適用されるプロパティが必要です。

scope: {
    myProperty: '@'
}

サイトのドキュメントとチュートリアルを読むことを強くお勧めします。分離スコープやその他のトピックについて知っておくべき情報はもっとたくさんあります。

これはscopeの値に関して、上のリンク先のページからの直接の引用です：

Scopeプロパティはtrue、オブジェクト、または偽の値になります。

  • falsy ：ディレクティブにスコープは作成されません。ディレクティブはその親のスコープを使用します。

  • true：プロトタイプ的にその親から継承した新しい子スコープがディレクティブの要素に対して作成されます。同じ要素に対して複数のディレクティブが新しい​​スコープを要求した場合、新しいスコープは1つだけ作成されます。テンプレートのルートは常に新しいスコープを取得するため、新しいスコープルールはテンプレートのルートには適用されません。

  • {...} （オブジェクトハッシュ） ：ディレクティブの要素に対して新しい "isolate"スコープが作成されます。 「分離」スコープは、プロトタイプ的にその親スコープから継承しないという点で通常のスコープとは異なります。これは、親スコープ内のデータを誤って読み取ったり変更したりしてはならない、再利用可能なコンポーネントを作成するときに役立ちます。

https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile＃-scope-から2017-02-13を取得、 CC-by-SA 3.0のライセンス

2
Heretic Monkey