詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用

更新時(shí)間：2017年08月23日 14:13:58 作者：天外野草

這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

對(duì)于一個(gè)Html5框架的好壞，我們有幾個(gè)評(píng)判標(biāo)準(zhǔn)，輕量級(jí)，可拓展，易復(fù)用，速度快。

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

那么數(shù)據(jù)交互過程中的幾個(gè)符號(hào)我們一定要有所了解，以及他們的區(qū)別是什么，防止我們?cè)谶\(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>

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

  } 
});

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

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

  } 
});

和上面@相比，這個(gè)直接賦值等于scope域下的t了

3. 最好我們看看&符號(hào)的使用

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

  } 
});

嘗試一下，就明白了，簡潔明了！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: