ホームページ > 記事 > ウェブフロントエンド > AngularJS スコープの解析とサンプル コードの使用
スコープは、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>
次の例は、上記のすべての手順を示しています
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>
。
以上がAngularJS スコープの解析とサンプル コードの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。