溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

angular中@、=、&指令有什么區(qū)別

發(fā)布時(shí)間：2021-05-08 10:11:31 來(lái)源：億速云 閱讀：171 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)angular中@、=、&指令有什么區(qū)別的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

當(dāng)directive中的scope設(shè)置為一個(gè)對(duì)象的時(shí)候，該指令就有了一個(gè)獨(dú)立的作用域，AngularJS提供了一種綁定策略用于隔離作用域和外部作用域進(jìn)行通信。

1、@（or @attr）

使用@符號(hào)可以進(jìn)行單項(xiàng)的數(shù)據(jù)綁定，取值總是一個(gè)字符串，所以要用{{}}。

另外這也是一個(gè)單向的綁定，外部數(shù)據(jù)改變會(huì)反應(yīng)到內(nèi)部，但是內(nèi)部數(shù)據(jù)變數(shù)據(jù)變化，外部不會(huì)變。

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

如果沒(méi)有通過(guò)@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、= （or =attr）

使用=進(jìn)行雙向數(shù)據(jù)綁定，任何一方的值改變都會(huì)反應(yīng)到另一方。因?yàn)槭请p向綁定，所以不要使用{{}}，不然以下demo會(huì)報(bào)錯(cuò)。

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

如果沒(méi)有通過(guò)@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、&（or &attr）

&用來(lái)綁定外部的函數(shù)。

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

如果沒(méi)有通過(guò)@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: '&'
			},
			template:'<input type="button" ng-click="showName()" value="+1"/>'
		}
	});
</script>
</html>

感謝各位的閱讀！關(guān)于“angular中@、=、&指令有什么區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手