這篇文章給大家分享的是有關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: '@'
// name: '@showName'
},
template:'<input type="text" ng-model="showName"/>',
// template:'<input type="text" ng-model="name"/>',
}
});
</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: '='
},
template:'<input type="text" ng-model="showName"/>'
}
});
</script>
</html>3、&（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="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>感謝各位的閱讀！關于“angular中@、=、&指令有什么區別”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
