深入解析AngularJS框架中$scope的作用與生命週期_AngularJS
$scope 的使用貫穿整個Angular App 應用,它與資料模型相關聯,同時也是表達式執行的上下文.有了$scope 就在視圖和控制器之間建立了一個通道,基於作用域視圖在修改資料時會立刻更新$scope,同樣的$scope 發生變更時也會立刻重新渲染視圖.
有了 $scope 這樣一個橋樑,應用的業務代碼可以都在 controller 中,而數據都存放在controller 的 $scope 中.
$scope是一個把view(一個DOM元素)連結到controller上的物件。在我們的MVC結構裡,這個 $scope 將成為model,它提供一個綁定到DOM元素(以及其子元素)上的excecution context。
儘管聽起來有點複雜,但 $scope 實際上就是一個JavaScript對象,controller和view都可以存取它,所以我們可以利用它在兩者間傳遞訊息。在這個 $scope 物件裡,我們既儲存數據,又儲存將要運行在view上的函數。
每個Angular應用程式都會有一個 $rootScope。這個 $rootScope 是最頂級的scope,它對應著含有 ng-app 指令屬性的那個DOM元素。
如果頁面上沒有明確設定 $scope ,Angular 就會把資料和函數都綁定到這裡, 第一部分的例子就是靠這一點成功運行的。
在這個例子裡,我們將使用 $rootScope 。在main.js檔案裡,我們給這個scope加上一個name屬性。把這個函數放進app.run函數裡執行,我們就保證了它能在應用的其他部分之前被執行。你可以把app.run函數看成是Angular應用的main方法。
app.run(function($rootScope) { $rootScope.name = "Ari Lerner"; });
現在,我們可以在view的任何地方存取這個name屬性,使用模版表達式{{}},像這樣:
{{ name }}
$rootScope
Angular 應用程式啟動並產生視圖時,會將根ng-app 元素與$rootScope 進行綁定.$rootScope 是所有$scope 的最上層物件,可以理解為一個Angular 應用中得全域作用域物件,所以為它附加太多邏輯或變數並不是一個好主意,和污染Javascript 全域作用域是一樣的.
$scope 的作用
$scope 物件在Angular 中充當資料模型的作用,也就是一般MVC 框架中Model 得角色.但又不完全與通常意義上的資料模型一樣,因為$scope 並不處理和操作資料,它只是建立了視圖和HTML 之間的橋樑,讓視圖和Controller 之間可以友善的通訊.
再進一步系統的劃分它的作用和功能:
- 提供了觀察者可以監聽資料模型的變化
- 可以將資料模型的變更通知整個 App
- 可以進行巢狀,隔離業務功能和資料
- 提供表達式上下文執行環境
在Javascript 中創建一個新的執行上下文,實際就是用函數創建了一個新的本地上下文,在Angular 中當為子DOM 元素創建新的作用域時,其實就是為子DOM 元素創建了一個新的執行上下文.
$scope 生命週期
Angular 中也有一個'事件'的概念,例如當一個綁定了ng-model 的input 值發生變化時,或者一個ng-click 的button 被點擊時,Angular 的事件循環就會啟動.事件循環是Angular 中非常非常核心的一個概念,因為不是本文主旨所以不多說,感興趣的可以自己看看資料.這裡事件就在Angular 執行上下文中處理,$scope 就會對定義的表達式求值.此時事件循環被啟動, Angular 會監控應用程式內所有物件,髒值檢查循環也會啟動.
$scope 的生命週期有4個階段:
1. 建立
控制器或指令建立時, Angular 會使用 $injector 建立一個新的作用域,然後在控制器或指令運行時,將作用域傳遞進去.
2. 連結
Angular 啟動後會將所有$scope 物件附加或說連結到視圖上,所有建立$scope 物件的函數也會被附加到視圖上。這些作用域將會註冊當Angular 上下文發生變化時需要執行的函數.也就是$watch 函數, Angular 透過這些函數或何時開始事件循環.
3. 更新
一旦事件循環開始運作,就會開始執行自己的髒值偵測.一旦偵測到變化,就會觸發 $scope 上指定的回呼函數
4. 銷毀
通常來講如果一個 $scope 在視圖中不再需要, Angular 會自己清理它.當然也可以透過 $destroy() 函數手動清理.
ng-controller
要明確建立一個$scope 對象,我們就要給DOM元素安上一個controller對象,使用的是ng-controller 指令屬性:
<div ng-controller="MyController"> {{ person.name }} </div>
ng-controller指令给所在的DOM元素创建了一个新的$scope 对象,并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里,这个外层DOM元素的$scope 对象,就是$rootScope 对象。这个scope链是这样的:
现在,MyController 给我们建立了一个可以从DOM元素内部直接访问的$scope 对象。下面我们在的这个$scope 里创建一个person对象,在main.js中:
app.controller('MyController', function($scope) { $scope.person = { name: "Ari Lerner" }; });
现在我们可以在有ng-controller='MyController'属性的DOM元素的任何子元素里访问这个person 对象,因为它在$scope上。
除了一个例外,所有scope都遵循原型继承(prototypal inheritance),这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父scope上去找,如果在父scope上也没找到,就会继续向上回溯,一直到$rootScope 上。
唯一的例外:有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope们。
举个例子,假设我们有一个ParentController ,含有一个person 对象,又有一个ChildController 想要访问这个对象:
app.controller('ParentController', function($scope) { $scope.person = {greeted: false}; }); app.controller('ChildController', function($scope) { $scope.sayHello = function() { $scope.person.greeted = true; } });
当我们在view里把ChildController 绑定到ParentController 之下,在子元素里我们就能访问ParentController 创建的父scope的属性,像访问ChildController 自己的scope中的属性一样:
<div ng-controller="ParentController"> <div ng-controller="ChildController"> <input type="text" ng-model="person.name" placeholder="Name"></input> <a ng-click="sayHello()">Say hello</a> </div> {{ person }} </div>

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

在現今資訊時代,網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備,為使用者提供優質的體驗,成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站,進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發。 PHP具有許多優點,如易於學習、跨平台、豐富的工具庫、開發效

隨著網路的不斷發展,Web應用已成為企業資訊化建設的重要組成部分,也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展,開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術,它們分別是伺服器端和客戶端的解決方案,透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP

隨著Web技術的快速發展,單頁Web應用程式(SinglePageApplication,SPA)已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序,SPA的最大優勢在於使用者感受更加流暢,同時伺服器端的運算壓力也大幅減少。在本文中,我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

隨著網路的普及,越來越多的人使用網路進行檔案傳輸和分享。然而,由於各種原因,使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此,建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台,基於PHP和AngularJS,能夠方便地進行文件上傳、下載、編輯、刪除等操作,並且提供了一系列強大的功能,例如文件共享、搜尋、

隨著Web應用程式的普及,前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架,它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面,對於後端編程,PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程,那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效

隨著網路的普及和發展,前端開發已變得越來越重要。身為前端開發人員,我們需要了解並掌握各種開發工具和技術。其中,PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中,我們將介紹如何使用這兩種工具進行前端開發。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言,它適用於Web開發,可以在Web伺服器和各種作業系統上運作。 PHP的優點是簡單、快速、便

這篇文章介紹的內容是關於AngularJS基礎入門介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下。
