angular の @、=、& 命令の違いに関する簡単な説明-jsチュートリアル-php.cn

angular の @、=、& 命令の違いに関する簡単な説明

青灯夜游

リリース： 2021-05-12 10:31:36

転載

2903 人が閲覧しました

この記事では、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: &#39;@&#39;
				// name: &#39;@showName&#39;
			},
			template:&#39;<input type="text" ng-model="showName"/>&#39;,
			// template:&#39;<input type="text" ng-model="name"/>&#39;,
		}
	});
</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: &#39;=&#39;
			},
			template:&#39;<input type="text" ng-model="showName"/>&#39;
		}
	});
</script>
</html>

ログイン後にコピー

3. &（または &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="count"/>
		</div>
		<my-name show-name="increment()">
		
		</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.count = 0;
		$scope.increment = function(){
			$scope.count++;
		};
	}).directive("myName", function(){
		return {
			restrict:"EA",
			scope:{
				showName: &#39;&&#39;
			},
			template:&#39;<input type="button" ng-click="showName()" value="+1"/>&#39;
		}
	});
</script>
</html>

ログイン後にコピー

プログラミング関連の知識については、プログラミングビデオをご覧ください。！

以上がangular の @、=、& 命令の違いに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。