AngularJS1.x學(xué)習(xí)directive中‘& ’‘=’ ‘@’符號的區(qū)別有哪些

發(fā)布時(shí)間：2021-08-05 09:49:40 來源：億速云閱讀：173 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)AngularJS1.x學(xué)習(xí)directive中‘& ’‘=’ ‘@’符號的區(qū)別有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

對組件復(fù)用這點(diǎn)，angular以directive的形式展示給開發(fā)者，是一個(gè)還算不錯(cuò)的選擇，作為一個(gè)UI組件，必定存在數(shù)據(jù)交互。

那么數(shù)據(jù)交互過程中的幾個(gè)符號我們一定要有所了解，以及他們的區(qū)別是什么，防止我們在運(yùn)用過程中出錯(cuò)。

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>

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>' 

  } 
});

這個(gè)必須指定的，這里的title是指令里scope的@對應(yīng)的，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>

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>' 

  } 
});

和上面@相比，這個(gè)直接賦值等于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>

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>' 

  } 
});

感謝各位的閱讀！關(guān)于“AngularJS1.x學(xué)習(xí)directive中‘& ’‘=’ ‘@’符號的區(qū)別有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

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

AngularJS1.x學(xué)習(xí)directive中‘& ’‘=’ ‘@’符號的區(qū)別有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽