詳解AngularJS中的作用域

更新時(shí)間：2015年06月17日 11:15:08 投稿：goldensun

這篇文章主要介紹了詳解AngularJS中的作用域,是AngularJS學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下

范圍扮演其視圖連接控制器的角色一個(gè)特殊的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被作為第一個(gè)參數(shù)在其構(gòu)造器確定指標(biāo)到控制器。
$scope.message 和 $scope.type 是它們在HTML頁面中所用的模型。
我們已經(jīng)設(shè)置模型的值將反映應(yī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設(shè)定模型的值。
我們覆蓋的子控制器circleController消息。當(dāng)“消息”內(nèi)的控制器circleController的模塊使用時(shí)，將用于重寫的消息。

例子

下面的例子將展示上述所有指令。
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。看到結(jié)果如下。

2015617110218233.jpg (560×429)

您可能感興趣的文章:

AngularJS

相關(guān)文章

掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
詳解Angular2響應(yīng)式表單
這篇文章主要介紹了詳解Angular2響應(yīng)式表單，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
Angular 5.0 來了! 有這些大變化
Angular 5.0 來了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化，感興趣的小伙伴們可以參考一下
2017-11-11
Angular 4依賴注入學(xué)習(xí)教程之ValueProvider的使用（七）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ValueProvider使用的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-06-06
說說AngularJS中的$parse和$eval的用法
本篇文章主要介紹了說說AngularJS中的$parse和$eval的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
深入理解AngularJS中的ng-bind-html指令
ng-bind-html和ng-bind的區(qū)別就是,ng-bind把值作為字符串,和元素的內(nèi)容進(jìn)行綁定,但是ng-bind-html把值作為html,和元素的html進(jìn)行綁定.相當(dāng)于jq里面的.text()和.html()。這篇文章主要給大家深入的介紹了AngularJS中ng-bind-html指令的相關(guān)資料,需要的朋友可以參考下。
2017-03-03
angularjs1.X 重構(gòu)controller 的方法小結(jié)
這篇文章主要介紹了angularjs1.X 重構(gòu)controller 的方法小結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
AngularJs定制樣式插入到ueditor中的問題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結(jié)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
Angular6項(xiàng)目打包優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Angular6項(xiàng)目打包優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
angular組件繼承的實(shí)現(xiàn)方法
本篇文章主要介紹了angular組件繼承的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02