這篇文章主要介紹“AngularJS表達(dá)式有什么作用”,在日常操作中,相信很多人在AngularJS表達(dá)式有什么作用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”AngularJS表達(dá)式有什么作用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)公司專注于涉縣網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供涉縣營銷型網(wǎng)站建設(shè),涉縣網(wǎng)站制作、涉縣網(wǎng)頁設(shè)計、涉縣網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù),打造涉縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供涉縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
AngularJS Scope(作用域)
當(dāng)你在 AngularJS 創(chuàng)建控制器時,你可以將 $scope 對象當(dāng)作一個參數(shù)傳遞:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <h2>{{carname}}</h2> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; }); </script> <p>控制器中創(chuàng)建一個屬性名 "carname",對應(yīng)了視圖中使用 {{ }} 中的名稱。</p> </body> </html>
當(dāng)在控制器中添加 $scope 對象時,視圖 (HTML) 可以獲取了這些屬性。 視圖中,你不需要添加 $scope 前綴, 只需要添加屬性名即可,如: {{carname}} AngularJS 應(yīng)用組成如下:
View(視圖), 即 HTML。
Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)。
Controller(控制器), 即 JavaScript 函數(shù),可以添加或修改屬性。
scope 是一個 JavaScript 對象,帶有屬性和方法,這些屬性和方法可以在視圖和控制器中使用。
如果你修改了視圖,模型和控制器也會相應(yīng)更新:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h2>{{greeting}}</h2> <button ng-click='sayHello()'>點我</button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; }); </script> <p>當(dāng)你修改輸入框中的值時,會影響到模型(model),當(dāng)然也會影響到控制器對應(yīng)的屬性值。</p> </body> </html>
了解你當(dāng)前使用的 scope 是非常重要的。
在以上兩個實例中,只有一個作用域 scope,所以處理起來比較簡單,但在大型項目中, HTML DOM 中有多個作用域,這時你就需要知道你使用的 scope 對應(yīng)的作用域是哪一個。
所有的應(yīng)用都有一個 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個應(yīng)用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值,可以在各個 controller 中使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <h2>姓氏為 {{lastname}} 家族成員:</h2> <ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes"; }); </script> <p>注意 $rootScope 在循環(huán)對象內(nèi)外都可以訪問。</p> </body> </html>
到此,關(guān)于“AngularJS表達(dá)式有什么作用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁名稱:AngularJS表達(dá)式有什么作用
網(wǎng)頁鏈接:http://vcdvsql.cn/article44/gghohe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、全網(wǎng)營銷推廣、移動網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、建站公司、網(wǎng)站設(shè)計公司
聲明:本網(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)