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： '>'」の使用は私のプロジェクトの問題であり、修正されました。
回答:
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コンポーネントバインディングの<一部として存在し、一方向のバインディングを意味します。
> ドキュメントにはありません。
< 一方向バインディング用です。
@バインディングは文字列を渡すためのものです。これらの文字列は{{}}、補間された値の式をサポートします。
=バインディングは、双方向モデルバインディング用です。親スコープ内のモデルは、ディレクティブの分離スコープ内のモデルにリンクされています。
& バインディングは、メソッドをディレクティブのスコープに渡して、ディレクティブ内で呼び出せるようにするためのものです。
ディレクティブでscope：trueを設定する場合、Angular jsはそのディレクティブの新しいスコープを作成します。つまり、ディレクティブスコープに加えられた変更は、親コントローラーには反映されません。
< 一方向バインディング
= 双方向バインディング
& 関数バインディング
@ 文字列のみを渡す
カスタマーディレクティブを作成する場合、ディレクティブのスコープは分離スコープ内にある可能性があります。これは、ディレクティブがスコープをコントローラーと共有しないことを意味します。ディレクティブとコントローラーの両方に独自のスコープがあります。ただし、データは3つの可能な方法でディレクティブスコープに渡すことができます。
@文字列リテラルを使用して文字列として渡すことができ、文字列値を渡すことができ、一方向バインディングです。=文字列リテラルを使用してオブジェクトとして渡すことができ、オブジェクトを渡す、2つの方法でバインドします。&文字列リテラルの関数として渡すことができ、外部関数を呼び出し、ディレクティブからコントローラーにデータを渡すことができます。ディレクティブのAngularJSドキュメントはかなりよくシンボルが何を意味するかのために書かれています。
明確にするために、
scope: '@'ディレクティブ定義内。次のように、これらのバインディングが適用されるプロパティが必要です。
scope: {
myProperty: '@'
}サイトのドキュメントとチュートリアルを読むことを強くお勧めします。分離されたスコープやその他のトピックについて知っておくべき情報がはるかに多くあります。
以下は、上記のページからの直接的な引用ですscope。
scopeプロパティは、true、オブジェクト、または偽の値にすることができます。
falsy：ディレクティブのスコープは作成されません。ディレクティブはその親のスコープを使用します。
true：親からプロトタイプ的に継承する新しい子スコープが、ディレクティブの要素に対して作成されます。同じ要素の複数のディレクティブが新しいスコープを要求する場合、1つの新しいスコープのみが作成されます。テンプレートのルートは常に新しいスコープを取得するため、新しいスコープルールはテンプレートのルートには適用されません。
{...}（オブジェクトハッシュ）：ディレクティブの要素に対して新しい「分離」スコープが作成されます。「分離」スコープは、親スコープからプロトタイプ的に継承しないという点で通常のスコープとは異なります。これは、親スコープのデータを誤って読み取ったり変更したりしない再利用可能なコンポーネントを作成するときに役立ちます。
https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile＃-scope- から2017-02-13を取得、CC-by-SA 3.0としてライセンス供与
@?ですか？