學習angularjs的總結與心得 作用域

2021-07-25 19:01:41 字數 2106 閱讀 3552

以前在學習angularjs的時候學習到$scope和$rootscope的時候,看了一下用法就感覺這個作用域不就和原生的區域性、全域性作用域是差不多的,然後就沒有細看,這段時間真正用到作用域方面的時候發現還是有區別的。

首先$scope是需要注入到控制器中的,作用域也就是當前控制器的範圍內適用;如果沒有尋找到則會沿著作用域鏈向上搜尋,直到根作用域$rootscope。scope是html和單個controller之間的橋梁,資料繫結就靠他了。rootscope是各個controller中scope的橋梁。用rootscope定義的值,可以在各個controller中使用。

而且,$rootscope是由angularjs載入模組的時候自動建立的,每個模組只會有1個rootscope。rootscope建立好會以服務的形式加入到 $injector中。也就是說通過 $injector.get("$ rootscope ");能夠獲取到某個模組的根作用域。更準確的來說,$rootscope是由angularjs的核心模組ng建立的。

例子一:

console.log(has_rootscope1.has("$rootscope")); //true

console.log(has_rootscope1.has("$rootscope")); //false

var has_rootscope3 = angular.injector(['ng']);

console.log(has_rootscope1.has("$rootscope")); //true

上例說明:

$tootscope由核心模組ng建立,並以服務的形式存在於injector中。如果建立injector的時候,指定了ng模組,那麼該injector中就包含$toorscope服務;否則不包含。

例子二:

//控制器裡的$injector,是有angular框架自動建立的

module.controller('ctrl',function($scope,$injector,$rootscope));

var rootscope = myinjector.get('$rootscope');

console.log($rootscope.name); //undefined

上例說明:angular.injector()可以呼叫多次,每次都返回新的injector物件。所以我們自己建立的injector物件和angular框架自動建立的$injector不是同乙個物件,那麼得到的$rootscope也就不是同乙個;由此可見,$rootscope的作用域不是我們想象中的全域性作用域。

例子三:

.controller('ctrl',function($scope,$injector,$rootscope));

上例說明:

ng-controller指令給所在的dom元素建立了乙個新的$scope物件,並作為$rootscope的子作用域;$scope是由$rootscope建立的,$scope不會保護在$injector中。

例子四:

//分別記住變數,用來判斷跨控制器是否相等

var my_rootscope = null;

var my_scope = null;

var my_injector = null;

module.controller('ctrl1',function($scope,$rootscope,$injector));

module.controller('ctrl2',function($scope,$rootscope,$injector));

上例說明:

弄清了這三者的關係,我們看下angular提供的兩個api,乙個是scope(),乙個是injector();使用angular.element()返回的dom物件,都會包含這兩個方法,用來獲取與之關聯的scope()和injector();

由於每個模組的injector是唯一的,所以angular.elment().injector()直接返回元素所在模組的injector;

angular.element().scope()可以獲取到當前的scope或父scope;如果當前元素有scope,則返回自己的scope;如果沒有則向父級方向尋找。如果找不到則返回rootscope;即返回作用域鏈上,距離該元素最近的scope。

對AngularJs的學習

angualrjs有什麼好處?angularjs是為了克服html在構建應用上的不足而設計的。angularjs使用了不同的方法,它嘗試去補足html本身在構建應用方面的缺陷。angularjs通過使用我們稱為識別符號 directives 的結構,讓瀏覽器能夠識別新的語法。例如 1.使用雙大括號 ...

angularjs學習筆記

不要用控制器去繼承控制器,通用的通過service來通用 不要試圖服用controller,乙個控制器只負責乙個塊試圖 不要在controller中操作dom,這不是controller的職責,用指令只做 不要在controller中做資料初始化,ng有表單控制項 不要在controller中做資料...

angularjs 學習筆記

文件 function angular bootstrap element,modules config 第乙個引數,要繫結的元素,第二個引數要繫結的modules 第三個引數 暫不明確 controller welcomecontroller function scope angular.boot...