Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程
Angular指令
定義一個指令的方法非常簡單，只需要調(diào)用`directive`方法即可:
var app=angular.module('myapp',[]);
app.directive(name,fn)
1. 基礎(chǔ)指令
var app=angular.module('myapp',[]);
app.run(function($templateCache){
$templateCache.put('cache','<h3>模板內(nèi)容來源于緩存</h3>')
});
app.directive('tsHello',function(){
return{
restrict:'EAC',
template:'<h3>Hello,directive</h3>'
}
})
app.directive('tsTplfile',function(){
return{
restrict:'EAC',
templateUrl:'/static/tpl.html'
}
});
app.directive('tsTplscript',function(){
return {
restrict:'EAC',
templateUrl:'tpl',
replace:true
}
});
//templateUrl屬性值是添加的緩存名稱，加速文件訪問
app.directive('tsTplcache',function(){
return{
restrict:'EAC',
templateUrl:'cache'
}
})
</script>
2. 重要指令
2.1 transclude
<script type="text/ng-template" id='tpl'>
<div>
<input type="text" ng-model='text' />
<div ng-transclude></div>
</div>
</script>
<ts-tplscript>{{text}}</ts-tplscript>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.directive('tsTplscript',function(){
return {
restrict:'EAC',
templateUrl:'tpl',
transclude:true
}
});
</script>
關(guān)于transclude更加詳細(xì)的介紹，參見另外一篇文章
2.2 link
link屬性的值是一個函數(shù)，在該函數(shù)中可以操控DOM元素的對象，包括綁定元素的各類事件，定義事件觸發(fā)時執(zhí)行的內(nèi)容等：
link:function(scope,iEle,iAttrs)
link 函數(shù)包括3個主要的參數(shù)，其中，scope參數(shù)表示指令所在的作用域，它的功能與頁面中控制器注入的作用域是相同的，iEle參數(shù)表示指令中的元素，該元素可以通過Angular內(nèi)部封裝的jqLite進(jìn)行調(diào)用，jqLite相當(dāng)于是一個壓縮版的jQuery，包含了主要的元素操作API，在語法上與jQuery類似，iAttrs參數(shù)表示指令元素的屬性集合，通過這個參數(shù)可以獲取元素中的各類屬性。
<script type="text/ng-template" id='tpl'>
<button>單擊按鈕</button>
</script>
<div>
<ts-tplscript></ts-tplscript>
<div>{{content}}</div>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.directive('tsTplscript',function(){
return {
restrict:'EAC',
templateUrl:'tpl',
replace:true,
link:function(scope,iEle,iAttrs){
iEle.bind('click',function(){
scope.$apply(function(){
scope.content='這是點(diǎn)擊后的內(nèi)容';
})
iAttrs.$$element[0].disabled=true;//這里也可以替換為this.disabled=true;
});
}
}
});
</script>
自定義tsTplscript指令時，在指令返回的對象中添加了link屬性，用于綁定和執(zhí)行DOM元素的各類事件，在屬性值執(zhí)行的函數(shù)中，添加scope,iEle,iAttrs三個參數(shù)，在指令執(zhí)行的過程中，由于指令中并沒有定義scope屬性，因此，scope參數(shù)默認(rèn)就是元素外層父級scope屬性，即控制器注入的$scope屬性。
此外，iEle參數(shù)就是被指令模板替換后的<button>元素，由于在Angular中引入了jqLite，因此可以直接調(diào)用bind方法綁定元素的各類事件，在執(zhí)行事件函數(shù)的時候，調(diào)用了scope屬性的$apply方法，它的功能是在執(zhí)行完方法中的函數(shù)之后，重新渲染頁面視圖。
iAttrs參數(shù)是指令元素的屬性集合，$$element則表示與屬性對應(yīng)的元素集合，該集合是一個數(shù)組。
2.3 compile
<div ng-controller='myController'>
<ts-a>
<ts-b>
{{tip}}
</ts-b>
</ts-a>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',function($scope){
$scope.tip='跟蹤compile執(zhí)行過程 ';
});
app.directive('tsA',function(){
return {
restrict:'EAC',
compile:function(tEle,tAttrs,trans){
console.log('正在編譯A指令');
//返回一個對象時，對象中包含兩個名為`pre`和`post`的方法函數(shù)
return {
pre:function(scope,iEle,iAttrs){
console.log('正在執(zhí)行A中的pre函數(shù)');
},
post:function(scope,iEle,iAttrs){
console.log('正在執(zhí)行A中的post函數(shù)');
}
}
}
}
});
app.directive('tsB',function(){
return {
compile:function(tEle,tAttrs,trans){
console.log('正在編譯B指令');
return{
pre:function(scope,iEle,iAttrs){
console.log('正在執(zhí)行B中的pre函數(shù)');
},
post:function(scope,iEle,iAttrs){
console.log('正在執(zhí)行B中的post函數(shù)');
}
}
}
}
})
</script>
控制臺依次輸出：
正在編譯A指令 正在編譯B指令 正在執(zhí)行A中的pre函數(shù) 正在執(zhí)行B中的pre函數(shù) 正在執(zhí)行B中的post函數(shù) 正在執(zhí)行A中的post函數(shù)
2.4 scope
2.4.1 當(dāng)scope值是布爾類型
scope屬性自定義指令時，默認(rèn)值就是布爾類型的，初始值為false，在這種情況下，指令中的作用域就是指令元素所在的作用域，如果scope屬性值為false，表示不創(chuàng)建新的作用域，直接繼承父級作用域，二者數(shù)據(jù)完全相同，一方有變化，另外一方面將會自動變化。
如果scope屬性值為true，表示子作用域是獨(dú)立創(chuàng)建的，當(dāng)它的內(nèi)容發(fā)生變化時，并不會修改父作用域中的內(nèi)容，不僅如此，一旦某個屬性被子作用域進(jìn)行了重置，那么，即使父作用域中的內(nèi)容變化了，子作用域?qū)?yīng)的內(nèi)容也不會隨之變化。
<script type="text/ng-template" id='tpl'>
<div>{{message}}</div>
<button ng-transclude></button>
</script>
<div>
<input type="text" ng-model='message' />
<ts-message>固定</ts-message>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.directive('tsMessage',function(){
return {
restrict:'EAC',
templateUrl:'tpl',
transclude:true,
scope:true,
link:function(scope,iEle,iAttrs){
iEle.bind('click',function(){
scope.$apply(function(){
scope.message='這是單擊按鈕后的值。'
})
})
}
}
});
</script>
在單擊按鈕之前，子作用域中的值隨父作用域改變，當(dāng)單擊按鈕之后，手動重置了子作用域中的'message'遍歷，但與變量綁定的父作用域的內(nèi)容并沒有變化，并且子作用域也不再隨父作用域發(fā)生變化。
2.4.2 當(dāng)scope值是對象
如果將scope屬性值設(shè)置成一個JSON對象，那么父作用域與子作用域完全獨(dú)立，不存在任何關(guān)聯(lián)。
當(dāng)指令中的scope屬性值是JSON對象時，如果子作用域需要添加屬性，必須先添加指令中的link函數(shù)，然后通過函數(shù)中的scope對象進(jìn)行添加，如果在子作用域中，要綁定或調(diào)用父父作用域中的屬性和方法，則需要在scope屬性對應(yīng)的JSON對象值中添加綁定策略。
嚴(yán)格來說，在JSON對象中添加的有3種綁定策略：@ = &
1、@
@綁定與將scope值設(shè)為true，有許多相同的地方，唯一不同之處在于，@綁定在子作用域充值屬性之后，再返回修改父作用域?qū)?yīng)屬性內(nèi)容時，子作用域?qū)?yīng)的屬性，同樣還是會隨之發(fā)生變化，而使用scope:true，則不會發(fā)生這一步。
2、=
=綁定的功能是創(chuàng)建一個父與子作用域可以同時共享的屬性，即當(dāng)父作用域修改了該屬性，子作用域也隨之變化，反之亦然，兩個作用域間完全共享和同步。
3、&
&綁定的功能是可以在獨(dú)立的子作用域中直接調(diào)用父作用域的方法，在調(diào)用時可以向函數(shù)傳遞參數(shù)，這種功能的好處在于，避免重復(fù)編寫功能相同的代碼，只需要進(jìn)行簡單的綁定設(shè)置，就可以使指令執(zhí)行后，輕松調(diào)用控制器中的方法。
<script type="text/ng-template" id='tpl'>
<div>
<span>姓名：{{textName}}</span>
<span>年齡：{{textAge}}</span>
</div>
<button ng-transclude></button>
</script>
<div ng-controller="myController">
姓名：<input type="text" ng-model='text_name' /><br>
年齡：<input type="text" ng-model='text_age' /><br>
<div>{{tip}}</div>
<ts-json a-attr="{{text_name}}" b-attr="text_age" reset="reSet()">重置</ts-json>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myController',function($scope){
$scope.reSet=function(){
$scope.tip='姓名與年齡重置成功！';
}
});
app.directive('tsJson',function(){
return {
restrict:'EAC',
templateUrl:'tpl',
transclude:true,
scope:{
textName:'@aAttr',
textAge:'=bAttr',
reSet:'&reset'
},
link:function(scope,iEle,iAttrs){
iEle.bind('click',function(){
scope.$apply(function(){
scope.reSet();
scope.textName='張三';
scope.textAge='20';
})
})
}
}
});
</script>
綁定的過程：
先在指令元素中創(chuàng)建a-attr或b-attr屬性，由于HTML不區(qū)分大小寫，因此使用-隔開。
需要注意的是：由于在指令中綁定策略不同，在指令元素中，屬性綁定屬性值也會有些變化，使用@綁定的屬性，綁定屬性值的方式為雙大括號{{}}，而使用=綁定的屬性，綁定屬性值的方式為等于號=，不需要雙大括號.
2.5 require和controller
當(dāng)一個子元素需要與一個父元素指令通信時，就需要添加并使用這兩個屬性值。
<div>
<ts-parent>
<div>{{ptip}}</div>
<ts-child>
<div>{{ctip}}</div>
</ts-child>
<button ng-click='click()'>換位</button>
</ts-parent>
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.directive('tsParent',function(){
return {
restrict:'EAC',
controller:function($scope,$compile,$http){
this.addChild=function(c){
$scope.ptip='今天天氣不錯！';
$scope.click=function(){
$scope.tmp=$scope.ptip;
$scope.ptip=c.ctip;
c.ctip=$scope.tmp;
}
}
}
}
});
app.directive('tsChild',function(){
return {
restrict:'EAC',
require:'^?tsParent',
link:function(scope,iEle,iAttrs,ctrl){
scope.ctip='氣溫正好18攝氏度';
ctrl.addChild(scope);
}
}
})
</script>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Angularjs 與 bower安裝和使用詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法,結(jié)合簡單實(shí)例形式分析了AngularJS控制器數(shù)據(jù)共享的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
解決nodejs中使用http請求返回值為html時亂碼的問題
下面小編就為大家?guī)硪黄鉀Qnodejs中使用http請求返回值為html時亂碼的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
AngularJS指令用于擴(kuò)展HTML。本文給大家介紹AngularJS入門教程之AngularJS指令，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡單實(shí)例
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡單實(shí)例，詳解數(shù)據(jù)雙向綁定實(shí)例的相關(guān)資料,需要的朋友可以參考下。2016-11-11
Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁面大小的功能
這篇文章主要介紹了Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁面大小的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù)，雙向綁定機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-12-12
AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個指令,這篇文章就來介紹這個指令的用法.有需要的小伙伴可以參考下。2015-06-06
AngularJS 的輸入驗證是一個強(qiáng)大的功能,可以幫助開發(fā)者確保用戶輸入的數(shù)據(jù)是準(zhǔn)確和完整的,這篇文章主要介紹了AngularJS 輸入驗證,需要的朋友可以參考下2024-07-07