ホームページ >ウェブフロントエンド >jsチュートリアル >angular の @、=、& 命令の違いに関する簡単な説明
この記事では、angular 命令の @、=、& の違いについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
[関連する推奨事項: "angular チュートリアル"]
ディレクティブのスコープがオブジェクトに設定されている場合、このディレクティブには独立したスコープがあり、AngularJS は分離されたスコープと外部スコープの間で通信するためのバインディング戦略を提供します。
1. @(または @attr)
単一項目のデータ バインディングには @ 記号を使用します。値は常に文字列であるため、{ を使用します{}}。
また、これも一方向のバインディングであり、外部データの変更は内部に反映されますが、内部データが変更されても外部データは変更されません。
属性は-で結び、スコープ内にはキャメルケース形式で記述します。
属性名が @attr で指定されていない場合、ローカル名は DOM 属性の名前と一致している必要があります。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>AngularJS</title> </head> <body> <div ng-controller="parent"> <div> <input type="text" ng-model="name"/> </div> <my-name show-name="{{name}}"> </my-name> </div> </body> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("parent", function($scope){ $scope.name = "Jhon"; }).directive("myName", function(){ return { restrict:"EA", scope:{ showName: '@' // name: '@showName' }, template:'<input type="text" ng-model="showName"/>', // template:'<input type="text" ng-model="name"/>', } }); </script> </html>
2, = (または =attr)
双方向データ バインディングには = を使用します。どちらかの側での値の変更はもう一方の側にも反映されます。双方向バインディングであるため、{{}} を使用しないでください。使用しないと、次のデモでエラーが報告されます。
属性は-で結び、スコープ内にはキャメルケース形式で記述します。
属性名が @attr で指定されていない場合、ローカル名は DOM 属性の名前と一致している必要があります。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>AngularJS</title> </head> <body> <div ng-controller="parent"> <div> <input type="text" ng-model="name"/> </div> <my-name show-name="name"> </my-name> </div> </body> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("parent", function($scope){ $scope.name = "Jhon"; }).directive("myName", function(){ return { restrict:"EA", scope:{ showName: '=' }, template:'<input type="text" ng-model="showName"/>' } }); </script> </html>
3. &(または &attr)
& は、外部関数をバインドするために使用されます。
属性は-で結び、スコープ内にはキャメルケース形式で記述します。
属性名が @attr で指定されていない場合、ローカル名は DOM 属性の名前と一致している必要があります。
76c82f278ac045591c9159d381de2c57 4704c240457a27d06147e4b0954b83f6 93f0f5c25f18dab9d176bd4f6de5d30e 4d0d87937f6c83b675e896c64d3eb7c9 b2386ffb911b14667cb8f0f91ea547a7AngularJS6e916e0f7d1e588d4f442bf645aedb2f 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 3cf3733f936ee7ff9ab6793a2dc37e9c dc6dce4a544fdca2df29d5ac0ea9906b 58a4888bfd6bdd4deef6ed9257169b2c 16b28748ea4df4d9c2150843fecfba68 9b92361dfcb7f4f2d4da3631b19fe5e4 43dc565517fdd6198f30dfe101a69eb8 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 144fcfe8d86d863df55fad0ee5374c042cacc6d41bbb37262a98f745aa00fbf0 8019067d09615e43c7904885b5246f0a var app = angular.module("myApp", []); app.controller("parent", function($scope){ $scope.count = 0; $scope.increment = function(){ $scope.count++; }; }).directive("myName", function(){ return { restrict:"EA", scope:{ showName: '&' }, template:'d05c16aa6e8be371f39f1d631fa39062' } }); 2cacc6d41bbb37262a98f745aa00fbf0 73a6ac4ed44ffec12cee46588e518a5e
プログラミング関連の知識については、プログラミング ビデオをご覧ください。 !
以上がangular の @、=、& 命令の違いに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。