AngularJS 作用域詳解及示例代碼
更新時間：2016年08月17日 15:08:30 作者：yak
本文主要介紹AngularJS 作用域的知識，這里整理了基礎資料，和示例代碼以及實現(xiàn)效果圖，有需要的小伙伴可以參考下
范圍扮演其視圖連接控制器的角色一個特殊的JavaScript對象。范圍包含了模型數(shù)據(jù)。在控制器，模型數(shù)據(jù)通過$scope對象訪問。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
以下是在上面的例子中需要考慮的重要問題。
$scope被作為第一個參數(shù)在其構(gòu)造器確定指標到控制器。
$scope.message 和 $scope.type 是它們在HTML頁面中所用的模型。
我們已經(jīng)設置模型的值將反映應用程序模塊的控制器shapeController中。
我們可以在$scope定義函數(shù)功能。
繼承范圍
范圍是特定的控制器。如果我們定義嵌套的控制器，然后控制器子將繼承其父控制的范圍。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
以下是在上面的例子中需要考慮的重要問題。
我們在shapeController設定模型的值。
我們覆蓋的子控制器circleController消息。當“消息”內(nèi)的控制器circleController的模塊使用時，將用于重寫的消息。
例子
下面的例子將展示上述所有指令。
testAngularJS.html
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller="circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller="squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
結(jié)果
在Web瀏覽器打開textAngularJS.html?？吹浇Y(jié)果如下。
以上就是對AngularJS 作用域的資料整理，后續(xù)繼續(xù)補充相關資料，謝謝大家對本站的支持！
相關文章
AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能示例
這篇文章主要介紹了AngularJS+bootstrap實現(xiàn)動態(tài)選擇商品功能,涉及AngularJS指令、事件響應及頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2017-05-05
這篇文章給大家介紹了如何利用AngularJs實現(xiàn)京東首頁輪播圖的效果，本文通過示例代碼詳細介紹了實現(xiàn)過程，對大家學習AngularJS具有一定參考借鑒價值，有需要的朋友們可以參考借鑒。2016-09-09
這篇文章主要介紹了angular 服務隨記小結(jié),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Angularjs實現(xiàn)數(shù)組隨機排序的方法
今天小編就為大家分享一篇Angularjs實現(xiàn)數(shù)組隨機排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)，詳細的介紹了ui-sref和$state.go的區(qū)別和如何傳參，有興趣的可以了解下2017-04-04
今天小編就為大家分享一篇angular2 組件之間通過service互相傳遞的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于Angular利用HTTP POST下載流文件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
這篇文章主要介紹了詳解Angular2響應式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
詳解Angular 4.x 動態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動態(tài)創(chuàng)建組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
angularjs實現(xiàn)搜索的關鍵字在正文中高亮出來
這篇文章主要介紹了angularjs實現(xiàn)搜索的關鍵字在正文中高亮出來，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06