詳解Angular.js指令中scope類型的幾種特殊情況
前言
大家都知道在默認(rèn)情況下,指令應(yīng)該訪問父作用域.如果我們對(duì)指令暴露了父控制器的scope,那么指令就可以自由的修改scope屬性.在一些情況下,你的指令可能想要添加一些只有內(nèi)部可以使用的屬性和函數(shù),如果我們都在父作用域中完成,可能會(huì)污染了父作用域,因此,我們有以下兩種選擇:
使用父作用域-如果不需要操作父作用域?qū)傩?不需要一個(gè)新的作用域,可以直接使用父作用域
scope:false
一個(gè)子作用域-這個(gè)作用域會(huì)原型繼承父作用域
scope:true
一個(gè)隔離的作用域-一個(gè)全新的、不繼承、獨(dú)立存在的作用域
scope:{}
作用域可以由指令定義對(duì)象中的scope屬性定義,下面是關(guān)于scope屬性的一些說明:
指令中的scope常見的類型
=
- '=',用于子作用域與父作用域雙向綁定.使用這種方法可以將一個(gè)實(shí)際的作用域模型賦值給一個(gè)屬性,而不是一個(gè)普通的字符串.效果是你可以傳遞復(fù)雜的數(shù)據(jù)模型,例如數(shù)組/對(duì)象等到隔離作用域.父作用域或者子作用域?qū)傩园l(fā)生了改變,會(huì)相應(yīng)影響對(duì)方.
- '=?',這種情況可以避免父作用域?qū)傩灾胁淮嬖诋?dāng)前屬性情況,避免拋出異常.--'If the parent scope property doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You can avoid this behavior using `=?` or `=?attr` in order to flag the property as optional.'
- '=*',If you want to shallow watch for changes (i.e. $watchCollection instead of $watch) you can use `=*` or `=*attr` (`=*?` or `=*?attr` if the property is optional).
&
- '&',用于執(zhí)行父作用域中的函數(shù).
@
- '@',進(jìn)行單項(xiàng)文本綁定.使用這種方法可以將字符串傳遞到屬性,當(dāng)父作用域?qū)傩园l(fā)生變化時(shí),隔離作用域模型也發(fā)生變化.然而,反之則不成立!你不能通過操縱隔離作用域來改變父作用域.
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- Angular1.x自定義指令實(shí)例詳解
- Angular之指令Directive用法詳解
- Angular.js自定義指令學(xué)習(xí)筆記實(shí)例
- angular分頁指令操作
- AngularJS內(nèi)置指令
- AngularJS學(xué)習(xí)筆記之基本指令(init、repeat)
- AngularJS中的指令全面解析(必看)
- 用AngularJS的指令實(shí)現(xiàn)tabs切換效果
- 深入講解AngularJS中的自定義指令的使用
- Angularjs編寫KindEditor,UEidtor,jQuery指令
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- Angular1.x復(fù)雜指令實(shí)例詳解
相關(guān)文章
詳解Angular5 服務(wù)端渲染實(shí)戰(zhàn)
本篇文章主要介紹了詳解Angular5 服務(wù)端渲染實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例
本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
對(duì)angular2中的ngfor和ngif指令嵌套實(shí)例講解
今天小編就為大家分享一篇對(duì)angular2中的ngfor和ngif指令嵌套實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AngularJS實(shí)時(shí)獲取并顯示密碼的方法
這篇文章主要介紹了AngularJS實(shí)時(shí)獲取并顯示密碼的方法,涉及AngularJS數(shù)據(jù)綁定及顯示相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念,但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說明的相關(guān)資料,需要的朋友可以參考下2016-08-08
AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn)
本篇文章主要介紹了AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn),這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04

