angularjs中scope作用域的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)angularjs中scope作用域的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的臺江網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

簡介

Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個存儲應(yīng)用數(shù)據(jù)模型的對象，有可用的方法和屬性。

Scope 可應(yīng)用在視圖和控制器上。

作用域是Web應(yīng)用的控制器和視圖之間的粘結(jié)劑：

控制器 --> 作用域 --> 視圖（DOM）
指令 --> 作用域 --> 視圖（DOM）

當(dāng)你在 AngularJS 創(chuàng)建控制器時，你可以將 $scope 對象當(dāng)作一個參數(shù)傳遞:

<div ng-controller="myCtrl">
<h2>{{name}}</h2>
</div>

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

輸出結(jié)果： 天下行走

控制器中創(chuàng)建一個屬性名 "name" ，對應(yīng)了視圖中使用 {{ }} 中的名稱。

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

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

AngularJS 應(yīng)用組成如下：

View(視圖) , 即 HTML。

Model(模型) , 當(dāng)前視圖中可用的數(shù)據(jù)。

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

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

再來看個例子：

<div ng-app="myApp" ng-controller="myCtrl">
  輸入你的名字：
  <input ng-model="name">
  <h2>{{greeting}}</h2>
  <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 對象：持有上面例子所需的數(shù)據(jù)模型，包括 name 屬性、 greeting 屬性 (注：這是在 sayHello() 方法被調(diào)用時注冊的) 和 sayHello() 方法

  3. 視圖：擁有一個輸入框、一個按鈕以及一個利用雙向綁定來顯示數(shù)據(jù)的內(nèi)容塊

那么具體整個示例有這樣兩個流程，從控制器發(fā)起的角度來看就是：

1、控制器往作用域中寫屬性：

給作用域中的 name 賦值，然后作用域通知視圖中的 input 數(shù)據(jù)變化了， input 因為通過 ng-model 實現(xiàn)了雙向綁定可以知道 name 的變化，進(jìn)而在視圖中渲染出改變的值

2、控制器往作用域中寫方法

給作用域中的 sayHello() 方法賦值，該方法被視圖中的 button 調(diào)用，因為 button 通過 ng-click 綁定了該方法，當(dāng)用戶點擊按鈕時， sayHello() 被調(diào)用，這個方法讀取作用域中的 name 屬性，加上后綴字符串，然后賦值給在作用域中新創(chuàng)建的 greeting 屬性

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

1、input 中的渲染邏輯：展示了通過 ng-model 進(jìn)行的作用域和 視圖中某表單元素的雙向綁定

  1. 根據(jù) ng-model 中的 name 去作用域中取，如果已經(jīng)有值，那么用這個默認(rèn)值填充當(dāng)前的輸入框

  2. 接受用戶輸入，并且將用戶輸入的字符串傳給 name ，這時候作用域中的該屬性值實時更新為用戶輸入的值

2、button 中的邏輯

接受用戶單擊，調(diào)用作用域中的 sayHello() 方法

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

  1. 初始階段 ：在用戶未單擊按鈕時，不顯示內(nèi)容

  2. 取值階段 ：在用戶單擊后，這個表達(dá)式會去 scope 中取 greeting 屬性，而本例中這個作用域和控制器是同一個的，這時候，該作用域下 greeting 屬性已經(jīng)有了，這時候這個屬性就被取回來了

  3. 計算階段 ：在當(dāng)前作用域下去計算 greeting 表達(dá)式，然后渲染視圖，顯示 張三是個笨蛋！

經(jīng)過以上的兩種角度分析示例過程，我們可以知道： 作用域(scope) 對象以及其屬性是視圖渲染的唯一數(shù)據(jù)來源。

感謝各位的閱讀！關(guān)于“angularjs中scope作用域的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：angularjs中scope作用域的示例分析-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article0/csjcoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、面包屑導(dǎo)航、網(wǎng)站收錄、網(wǎng)頁設(shè)計公司、軟件開發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管