關于angularJs指令的Scope(作用域)介紹
每當一個指令被創(chuàng)建的時候,都會有這樣一個選擇,是繼承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),還是創(chuàng)建一個新的自己的作用域,當然AngularJS為我們指令的scope參數(shù)提供了三種選擇,分別是:false,true,{};默認情況下是false。
1.scope = false
JS 代碼:

html 代碼:

result:

修改文本框的內容,兩個名字都會變,實際上修改的是同一個$scope的name屬性。
2. scope=true
修改上面的JS代碼,將指令中的:scope:false修改為scope:true
然后我們再試著在我們的input輸入框中寫一些字符串,會發(fā)現(xiàn),指令中的那個name發(fā)生了變化,但是指令外的那個name卻沒有發(fā)生變化,這說明了一個問題。
當我們將scope設置為true的時候,我們就新創(chuàng)建了一個作用域,只不過這個作用域是繼承了我們的父作用域;我覺得可以這樣理解,我們新創(chuàng)建的作用域是一個新的作用域,只不過在初始化的時候,用了父作用域的屬性和方法去填充我們這個新的作用域。它和父作用域不是同一個作用域。
當我們將scope設置為false的時候,我們創(chuàng)建的指令和父作用域(其實是同一個作用域)共享同一個model模型,所以在指令中修改模型數(shù)據,它會反映到父作用域的模型中。
3. scope={}
當我們將scope設置為{}時,意味著我們創(chuàng)建的一個新的與父作用域隔離的新的作用域,這使我們在不知道外部環(huán)境的情況下,就可以正常工作,不依賴外部環(huán)境。
JS代碼:

html代碼:

result:

修改文本框內容只有指令中的名字會被修改.
scope: {@=&}
@
這是一個單項綁定的前綴標識符
使用方法:在元素中使用屬性,好比這樣<div my-directive my-name="{{name}}"></div>,注意,屬性的名字要用-將兩個單詞連接,因為是數(shù)據的單項綁定所以要通過使用{{}}來綁定數(shù)據。
=
這是一個雙向數(shù)據綁定前綴標識符
使用方法:在元素中使用屬性,好比這樣<div my-directive age="age"></div>,注意,數(shù)據的雙向綁定要通過=前綴標識符實現(xiàn),所以不可以使用{{}}。
&
這是一個綁定函數(shù)方法的前綴標識符
使用方法:在元素中使用屬性,好比這樣<div my-directive change-my-age="changeAge()"></div>,注意,屬性的名字要用-將多個個單詞連接。
以上就是小編為大家?guī)淼年P于angularJs指令的Scope(作用域)介紹全部內容了,希望大家多多支持腳本之家~
相關文章
Angular.js之作用域scope''@'',''='',''&''實例詳解
這篇文章主要介紹了Angular.js之作用域scope'@','=','&'實例詳解,需要的朋友可以參考下2017-02-02
AngularJS解決ng界面長表達式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達式(ui-set)的方法,通過具體問題的分析并結合實例形式給出了AngularJS長表達式的相關使用技巧,需要的朋友可以參考下2016-11-11
利用angular自動編譯andriod APK的繞坑經歷分享
這篇文章主要給大家介紹了關于如何利用angular自動編譯andriod APK的繞坑經歷,文中通過示例代碼以及圖文介紹的非常詳細,對大家的學習或者使用angular具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-03-03
使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04

