AngularJS スコープの解析とサンプルコードの使用-jsチュートリアル-php.cn

AngularJS スコープの解析とサンプルコードの使用

怪我咯

リリース： 2017-03-30 09:30:19

オリジナル

1208 人が閲覧しました

スコープは、View Connection Controller内で特別な JavaScript オブジェクトの役割を果たします。スコープには model データが含まれます。コントローラーでは、モデルデータは

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

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

ログイン後にコピー

オブジェクトを通じてアクセスされます。上記の例では、次の点を考慮する必要があります。最初のパラメーターは、コントローラーへのポインターを決定します

$scope.message と $scope.type は、HTML ページで使用されるモデルです

設定したモデルの値はアプリケーションに反映されます
$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>

ログイン後にコピー

上記の例では、次の点を考慮する必要があります。「メッセージ」がコントローラーの CircleController 内にある場合、モジュールは次の目的で使用されます。メッセージを書き換えます

例

次の例は、上記のすべての手順を示しています

testAngularJS.html

<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <p ng-app="mainApp" ng-controller="shapeController">
   <p>{{message}} <br/> {{type}} </p>
   <p ng-controller="circleController">
     <p>{{message}} <br/> {{type}} </p>
   </p>
   <p ng-controller="squareController">
     <p>{{message}} <br/> {{type}} </p>
   </p>
  </p>
  <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を開きます
。

。

以上がAngularJS スコープの解析とサンプルコードの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。