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

更新時間:2023-07-26 來源:黑馬程序員瀏覽量:

IT培訓班

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

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

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

接下來通過一個案例來演示如何在AngularJS作用域中定義屬性和函數(shù)，代碼見如下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ù)，當say()函數(shù)被調(diào)用時，會在作用域中定義welcome屬性，welcome屬性值為拼接字符串;第10~12行分別在HTML中綁定了name屬性、welcome屬性和say()函數(shù)。單擊第12行定義的“登錄”按鈕時，say()函數(shù)將被調(diào)用，第11行插值語法中的welcome屬性值將顯示在頁面上。

打開Chrome瀏覽器，訪問demo,頁面效果如圖所示。

1690360117374_頁面效果.jpg