[解決済み] カスタムディレクティブのスコープバインディングで記号 '@', '&', '=', '>' を使用する。AngularJS
2022-04-25 11:54:47
質問
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:'>'"
は、公式ドキュメントに存在するかどうか。私のプロジェクトでは使用されています。
(使用するのは
"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 コンポーネントバインディング
であり、一方通行のバインディングを意味する。
関連
-
[解決済み] ng-pattern` - 数字だけをチェックする方法は?
-
[解決済み] AngularJSのリソースプロミス
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] オブジェクトと選択機能を備えたAngularJS BootstrapUI Typeahead
-
[解決済み] X-Frame-Options'を'SAMEORIGIN'に設定しているため、フレーム内での表示を拒否された。
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] Apigee API へのリクエストで 401 レスポンスエラーが発生する
-
[解決済み] createspyとcreatespyobjの違いは何ですか?
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] AngularJSのコントローラを指定する:ngControllerと$routeProviderを使用する利点
-
[解決済み] Ui-srefがクリッカブルリンクを生成しない/動作しない
-
[解決済み] angular.serviceとangular.factoryの比較