ホームページ > 記事 > ウェブフロントエンド > AngularJS スコープの解析とサンプル コードの使用
AngularJS スコープの解析とサンプル コードの使用
- 怪我咯オリジナル
- 2017-03-30 09:30:191185ブラウズ
スコープは、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。