快捷導(dǎo)航

angularjs指令之綁定策略（@、=、&）

更新時間：2017年04月13日 14:20:36 作者：ikscher

這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。

引入主題背景：angular 的指令配置中的template可以直接使用硬編碼寫相應(yīng)的代碼，不過也可以根據(jù)變量，進(jìn)行動態(tài)更新。那么需要用到那些變量，因用法的不同，所以需要設(shè)置合適的綁定策略。

1：先說指令域scope的@

我覺得描述很費勁，直接用代碼來闡述：

AngularJS.html

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 <input type="text" ng-model="t" /> 
  <kid title="{{t}}" > //這個必須指定的，這里的title是指令里scope的@對應(yīng)的，t就是控制域scope下的 
  <span>我的angularjs</span> 
 </kid> 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore="motorola"; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   title:"@" 
  }, 
  template:'<div >{{title}}</div>' 
   
 } 
});

在輸入框輸入數(shù)字會綁定到指令模板的title中。

2：再說說Scope的=

angularjs.html

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 <input type="text" ng-model="t" /> 
  <kid title="t" > //和上面相比，這個直接賦值等于scope域下的t了 
  <p>{{title}}</p> 
  <span>我的angularjs</span> 
 </kid> 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js代碼如下：

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore="motorola"; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   title:"=" 
  }, 
  template:'<div >{{title}}</div>' 
   
 } 
});

3：最后說&，這個是用來方法調(diào)用的

angularjs.html代碼如下：

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
  <kid flavor="logchore()" ></kid> //先比=，函數(shù)賦值的形式，而logchore函數(shù)必須是域scope下聲明的函數(shù) 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js代碼如下：

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore=function(){ 
  alert('ok'); 
 }; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   flavor:"&" 
  }, 
  template:'<div ><button ng-click="flavor()"></button></div>' 
   
 } 
});

如果logchore帶有參數(shù)，

angularjs.html代碼如下：

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 
  <kid flavor="logchore(t)" ></kid> 
 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js代碼如下：

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore=function(x){ 
  alert(x); 
 }; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   flavor:"&" 
  }, 
  template:'<div > <input type="text" ng-model="v" /> <button ng-click="flavor({t:v})"></button></div>' 
   
 } 
});

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

您可能感興趣的文章: