溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關AngularJS1.x學習directive中‘& ’‘=’ ‘@’符號的區別有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
對組件復用這點，angular以directive的形式展示給開發者，是一個還算不錯的選擇，作為一個UI組件，必定存在數據交互。
那么數據交互過程中的幾個符號我們一定要有所了解，以及他們的區別是什么，防止我們在運用過程中出錯。
1. 首先，我們看一scope作用域下面@的使用：
html
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<test title="{{t}}" >
<span>我的angularjs</span>
</test>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body></html>js
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore="motorola";
});
myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
title:"@"
},
template:'<div >{{title}}</div>'
}
});這個必須指定的，這里的title是指令里scope的@對應的，t就是控制域scope下的 .
2. = 的使用。
html
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<test title="t" >
<p>{{title}}</p>
<span>我的angularjs</span>
</test>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="main05.js"></script>
</body></html>js
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore="motorola";
});
myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
title:"="
},
template:'<div >{{title}}</div>'
}
});和上面@相比，這個直接賦值等于scope域下的t了
3. 最好我們看看&符號的使用
html
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <test flavor="logchore()" ></test> </div> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="main05.js"></script> </body></html>
js
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore=function(){
alert('ok');
};
});
myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
flavor:"&"
},
template:'<div ><button ng-click="flavor()"></button></div>'
}
});感謝各位的閱讀！關于“AngularJS1.x學習directive中‘& ’‘=’ ‘@’符號的區別有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
