【鄭州分院第一百一十一期】ANGULAR之中,$STATE $WATCH $SCOPE $ROOTSCOPE 分別是什么?

1.背景介紹

在平時的編碼中,我們總會想著有什么方法能夠簡化我們的工作流程,讓我們只專心于業務邏輯和數據的處理,而angularjs 就為我們程序員實現了這一點。$scope $rootScope $watch 和 $state就是里面的幾個方法,今天著重跟大家討論一下這 幾個方法.

2.知識剖析

$SCOPE

$scope在angularjs中,你可以把它理解成作用域,每個不同的controller,都具有它不同的作用域,所以 controller不同,他們的scope是不同的,那么,如果我們想象js那樣,做一個全局變量該怎么辦呢?這就要說 到rootScope了。

$ROOTSCOPE

$rootScope就相當于一個全局作用域,所以我們保存在其中的東西是全局性的,在任一controller之中都能夠使用

scope是html和單個controller之間的橋梁,數據綁定就靠他了。rootscope是各個controller中scope的橋梁。 用rootscope定義的值,可以在各個controller中使用。

$WATCH

相信使用過angularjs的同學都知道,ng中有個比較重要的特點,叫做雙向綁定,那么這個雙向綁定是如何實現的呢? 當我們在創建出scope下的一個新屬性的時候,ng就會主動為我們新屬性加上$watch這個方法,這個方法會監聽我們 的數據變化,當數據變化之后,就立即把view和scope上數據同步。

$watch(watchExpression, listener, objectEquality);

watchExpression,需要監控的表達式

listener,處理函數,函數參數如下 function(newValue,oldValue, scope)

objectEquality,是否深度監聽,如果設置為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它

$STATE

在ajax技術發展普及之后,因為其不會留下歷史記錄方便瀏覽器訪問和對于seo不友好的特點,一個新技術應運而生: 路由,$state就是路由中的一項服務。

3.常見問題

如何讓相同的指令,具有不同的作用域

4.解決方案

只需要在指令中加上scope:{},就能把它的作用域獨立出來啦!每用一次指令都會有一個不同的作用域喲

5.編碼實戰

如果我們需要它有不同的作用域,如何實現呢?

{ }:創建一個新的“隔離”scope,但仍可與父scope通信 隔離的scope,通常用于創建可復用的指令,也就是它不用管父scope中的model。然而雖然說是“隔離”,但通常我們還是需要讓這個子scope跟父scope中的變量進行綁定。綁定的策略有3種:

@:單向綁定,外部scope能夠影響內部scope,但反過來不成立

=:雙向綁定,外部scope和內部scope的model能夠相互改變

&:把內部scope的函數的返回值和外部scope的任何屬性綁定起來

6.擴展思考

路由的具體用法

http://blog.csdn.net/fansongy/article/details/44162685

7.參考文獻

參考一:深度理解scope

參考二:原始數據類型和對象類型的區別及深度拷貝解析


ANGULAR之中,$STATE i分別是什么?_騰訊視頻


文本鏈接:http://www.jnshu.com/daily/23221?dailyType=others&total=101&page=2&uid=6429&sort=0&orderBy=3

PPT鏈接:https://ptteng.github.io/PPT/PPT/js-07-$state$watch$scope$rootscope.html

視頻鏈接:https://v.qq.com/x/page/k0503p9oko9.html

------------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個工程師,現在開始,找個師兄,帶你入門,掌控自己學習的節奏,學習的路上不再迷茫”。

這里是技能樹.IT修真院,成千上萬的師兄在這里找到了自己的學習路線,學習透明化,成長可見化,師兄1對1免費指導。快來與我一起學習吧 !http://www.jnshu.com/login/1/64290793

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容