詳解angularjs 學習之 scope範圍，angularjsscope

詳解angularjs 學習之 scope範圍，angularjsscope

簡介

Scope(範圍) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個儲存應用資料模型的對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

範圍是Web應用的控制器和視圖之間的粘結劑：

控制器 --> 範圍 --> 視圖（DOM）
指令 --> 範圍 --> 視圖（DOM）

當你在 AngularJS 建立控制器時，你可以將 $scope 對象當作一個參數傳遞:

<div ng-controller="myCtrl"><h1>{{name}}</h1></div><script>var app = angular.module('test', []);app.controller('myCtrl', function($scope) {  $scope.name = "天下行走";});</script>

輸出結果： 天下行走

控制器中建立一個屬性名稱 "name" ，對應了視圖中使用 {{ }} 中的名稱。

當在控制器中添加 $scope 對象時，視圖 (HTML) 可以擷取了這些屬性。

視圖中，你不需要添加 $scope 首碼, 只需要添加屬性名稱即可，如： {{name}} 。

AngularJS 應用組成如下：

View(視圖) , 即 HTML。

Model(模型) , 當前視圖中可用的資料。

Controller(控制器) , 即 JavaScript 函數，可以添加或修改屬性。

scope 是一個 JavaScript 對象，帶有 屬性 和 方法 ，這些屬性和方法可以在視圖和控制器中使用。

再來看個例子：

<div ng-app="myApp" ng-controller="myCtrl">  輸入你的名字：  <input ng-model="name">  <h1>{{greeting}}</h1>  <button ng-click='sayHello()'>greet</button>  </div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {  $scope.name = "張三";  $scope.sayHello = function() {    $scope.greeting = $scope.name + '是個笨蛋!';  };});</script>

在這個例子中，

1. 控制器： MyCtrl ，它引用了 $scope 並在其上註冊了兩個屬性和一個方法
2. $scope 對象：持有上面例子所需的資料模型，包括 name 屬性、 greeting 屬性 (註：這是在 sayHello() 方法被調用時註冊的) 和 sayHello() 方法
3. 視圖：擁有一個輸入框、一個按鈕以及一個利用雙向繫結來顯示資料的內容塊

那麼具體整個樣本有這樣兩個流程，從控制器發起的角度來看就是：

1、控制器往範圍中寫屬性：

給範圍中的 name 賦值，然後範圍通知視圖中的 input 資料變化了， input 因為通過 ng-model 實現了雙向繫結可以知道 name 的變化，進而在視圖中渲染出改變的值

2、控制器往範圍中寫方法

給範圍中的 sayHello() 方法賦值，該方法被視圖中的 button 調用，因為 button 通過 ng-click 綁定了該方法，當使用者點擊按鈕時， sayHello() 被調用，這個方法讀取範圍中的 name 屬性，加上尾碼字串，然後賦值給在範圍中新建立的 greeting 屬性

整個樣本的過程如果從視圖的角度看，那主要是以下三個部分：

1、input 中的渲染邏輯：展示了通過 ng-model 進行的範圍和 視圖中某表單元素的雙向繫結

1. 根據 ng-model 中的 name 去範圍中取，如果已經有值，那麼用這個預設值填充當前的輸入框
   
2. 接受使用者輸入，並且將使用者輸入的字串傳給 name ，這時候範圍中的該屬性值即時更新為使用者輸入的值

2、button 中的邏輯

接受使用者單擊，調用範圍中的 sayHello() 方法

3、{{greeting}} 的渲染邏輯

1. 初始階段 ：在使用者未單擊按鈕時，不顯示內容
2. 取值階段 ：在使用者單擊後，這個運算式會去 scope 中取 greeting 屬性，而本例中這個範圍和控制器是同一個的，這時候，該範圍下 greeting 屬性已經有了，這時候這個屬性就被取回來了
3. 計算階段 ：在當前範圍下去計算 greeting 運算式，然後渲染視圖，顯示 張三是個笨蛋！

經過以上的兩種角度分析樣本過程，我們可以知道： 範圍(scope) 對象以及其屬性是視圖渲染的唯一資料來源。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。