AngularJS怎樣在作用域中定義屬性和函數(shù)？

更新時(shí)間:2023-07-26 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

通常來(lái)說(shuō)，一段程序代碼中所用到的名稱(如屬性名、函數(shù)名)并不總是有效的，而限定該名稱可用性的代碼范圍就是該名稱的作用域。作用域的使用可提高程序邏輯的局部性，增強(qiáng)程序的可靠性，減少命名沖突。

Angular的作用域就是一個(gè)“數(shù)據(jù)倉(cāng)庫(kù)”，由基本的JavaScript對(duì)象組成。作用域中有可用的屬性和函數(shù)，這些屬性和函數(shù)可以在視圖和控制器中使用。作用域有層次結(jié)構(gòu)，這個(gè)層次結(jié)構(gòu)與相關(guān)聯(lián)的DOM結(jié)構(gòu)相對(duì)應(yīng)。

在AngularJS中，作用域($scope)是控制器回調(diào)函數(shù)的參數(shù)，當(dāng)一個(gè)控制器被定義時(shí)，就產(chǎn)生了一個(gè)作用域。

接下來(lái)通過(guò)一個(gè)案例來(lái)演示如何在AngularJS作用域中定義屬性和函數(shù)，代碼見(jiàn)如下demo。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>
    AngularJS 作用域
    </title>
    </meta>
    </head>
    <body>
<！--綁定模塊和控制器-->
<div ng-app="myApp" ng-controller="MainController">
            <input ng-model="name">
                <h1>
                    {{welcome}}
                </h1>
                <button ng-click="say()">
                    登錄                </button>
                    
                <p>
                    單擊按鈕調(diào)用作用域中定義的say()函數(shù)
                </p>
            </input>
        </div>
        <script src="lib/angular.js">
        </script>
        <script>
            //定義模塊
var app=angular.module('myApp', []);
//定義控制器
app.controller ('MainController', function ($scope) {
//定義屬性 name
$scope.name="lucy";
//定義函數(shù)say（）
$scope.say=function() {
$scope.welcome='welcome:'+$scope.name+'!';
};
}):
        </script>
    </body>
</html>

在上述代碼中，第21行定義了name屬性;第23行定義了say()函數(shù)，當(dāng)say()函數(shù)被調(diào)用時(shí)，會(huì)在作用域中定義welcome屬性，welcome屬性值為拼接字符串;第10~12行分別在HTML中綁定了name屬性、welcome屬性和say()函數(shù)。單擊第12行定義的“登錄”按鈕時(shí)，say()函數(shù)將被調(diào)用，第11行插值語(yǔ)法中的welcome屬性值將顯示在頁(yè)面上。

打開(kāi)Chrome瀏覽器，訪問(wèn)demo,頁(yè)面效果如圖所示。

1690360117374_頁(yè)面效果.jpg