angularjs指令之綁定策略（@、=、&）
更新時間：2017年04月13日 14:20:36 作者：ikscher
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠將指令內部的隔離作用域，同指令外部的作用域進行數據綁定。
引入主題背景：angular 的指令配置中的template可以直接使用硬編碼寫相應的代碼，不過也可以根據變量，進行動態(tài)更新。那么需要用到那些變量，因用法的不同，所以需要設置合適的綁定策略。
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的@對應的，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>'
}
});
在輸入框輸入數字會綁定到指令模板的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：最后說&，這個是用來方法調用的
angularjs.html代碼如下：
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <kid flavor="logchore()" ></kid> //先比=，函數賦值的形式，而logchore函數必須是域scope下聲明的函數 </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帶有參數，
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>'
}
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
angular內置provider之$compileProvider詳解
下面小編就為大家?guī)硪黄猘ngular內置provider之$compileProvider詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了AngularJS動態(tài)加載模塊和依賴的方法,結合實例形式分析了AngularJS使用ocLazyLoad實現動態(tài)加載的相關操作技巧,需要的朋友可以參考下2016-11-11
使用typescript開發(fā)angular模塊并發(fā)布npm包
本篇文章主要介紹了使用typescript開發(fā)angular模塊并發(fā)布npm包，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Angular ElementRef簡介及其使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
angularJs使用ng-repeat遍歷后選中某一個的方法
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解Angular 4.x 動態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動態(tài)創(chuàng)建組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來架構(為什么要使用MVC+REST+CQRS架構)，如果你有Struts或SpringMVC等后端MVC框架編程經驗，學習Angular會很快，基本是按照同一個MVC思路實現的，本文給大家介紹AngularJS+HTML+Groovy實現登錄功能2016-02-02
詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例
本篇文章主要介紹了詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例 ，有需要的小伙伴可以參考下。2017-02-02
這篇文章主要介紹了jquery操作angularjs對象的相關資料,需要的朋友可以參考下2015-06-06
本文通過實例給大家介紹了angular排序的相關知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-06-06