ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJSのスコープの詳細説明

AngularJS_AngularJSのスコープの詳細説明

WBOYオリジナル: 2016-05-16 15:54:321203ブラウズ

スコープは、ビューが接続されているコントローラーの役割を果たす特別な JavaScript オブジェクトです。スコープにはモデルデータが含まれます。コントローラーでは、$scope オブジェクトを通じてモデルデータにアクセスします。

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });
</script>

上記の例で考慮すべき重要な点は次のとおりです。

$scope は、コントローラーへのポインターを決定するために、コンストラクターの最初のパラメーターとして取得されます。
$scope.message と $scope.type は、HTML ページで使用されるモデルです。
設定したモデルの値は、アプリケーションモジュールのコントローラーshapeControllerに反映されます。
$scope で関数関数を定義できます。

継承範囲

スコープはコントローラーに固有です。ネストされたコントローラーを定義すると、子コントローラーは親コントロールのスコープを継承します。

<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 メッセージ。オーバーライドされたメッセージは、コントローラー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>

結果

Web ブラウザで textAngularJS.html を開きます。以下の結果をご覧ください。

2015617110218233.jpg (560×429)

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptの例外処理メソッドを詳しく解説_基礎知識次の記事：JavaScriptの例外処理メソッドを詳しく解説_基礎知識

続きを見る

AngularJS_AngularJSのスコープの詳細説明

関連記事