首頁 >web前端 >js教程 >淺談angular中@、=、&指令的差異

淺談angular中@、=、&指令的差異

青灯夜游轉載: 2021-05-08 09:53:202928瀏覽

本篇文章帶大家了解一下angular指令中@，=，&的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【相關推薦：《angular教學》】

當directive中的scope設定為一個物件的時候，該指令就有了一個獨立的作用域，AngularJS提供了一種綁定策略用於隔離作用域和外部作用域進行通訊。

1、@（or @attr）

使用@符號可以進行單一項目的資料綁定，取值總是一個字串，所以要用{{}}。

另外這也是一個單向的綁定，外部資料改變會反應到內部，但是內部資料變資料變化，外部不會改變。

屬性要用-連接，scope中寫它的駝峰格式。

如果沒有透過@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、= （or =attr）

使用=進行雙向資料綁定，任何一方的值改變都會反應到另一方。因為是雙向綁定，所以不要用{{}}，不然以下demo會報錯。

屬性要用-連接，scope中寫它的駝峰格式。

如果沒有透過@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、&（or &attr）

&用來綁定外部的函數。

屬性要用-連接，scope中寫它的駝峰格式。

如果沒有透過@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中文網其他相關文章！

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：js中==和===的差別是什麼下一篇：js中==和===的差別是什麼

看更多