詳解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)文章
Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解
這篇文章主要為大家介紹了Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11詳細(xì)談?wù)凙ngularJS的子級(jí)作用域問題
大家在使用angularjs的時(shí)候,很容易忽略AngularJS自帶指令的作用域問題,有一些指令會(huì)產(chǎn)生獨(dú)立的自己作用域,造成子級(jí)無法與父級(jí)作用域雙向綁定的問題。下面我們來看看這些問題,有需要的可以參考借鑒。2016-09-09使用AngularJS制作一個(gè)簡單的RSS閱讀器的教程
這篇文章主要介紹了使用Angular.js制作一個(gè)簡單的RSS閱讀器的教程,AngularJS是一個(gè)非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06舉例簡介AngularJS的內(nèi)部語言環(huán)境
這篇文章主要介紹了AngularJS的內(nèi)部語言環(huán)境,展示不同語言環(huán)境下對(duì)貨幣或是日期等文本方面所產(chǎn)生的影響,需要的朋友可以參考下2015-06-06angular學(xué)習(xí)之從零搭建一個(gè)angular4.0項(xiàng)目
本篇文章主要介紹了從零搭建一個(gè)angular4.0項(xiàng)目,主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0),有興趣的可以了解一下2017-07-07詳解Angular調(diào)試技巧之報(bào)錯(cuò)404(not found)
本篇文章主要介紹了詳解Angular調(diào)試技巧之報(bào)錯(cuò)404(not found),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個(gè)指令,這篇文章就來介紹這個(gè)指令的用法.有需要的小伙伴可以參考下。2015-06-06