Ein Bereich ist ein spezielles JavaScript-Objekt, das die Rolle des Controllers übernimmt, mit dem seine Ansicht verbunden ist. Der Bereich enthält Modelldaten. Im Controller erfolgt der Zugriff auf Modelldaten über das $scope-Objekt.
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); </script>
Die folgenden wichtigen Punkte sind im obigen Beispiel zu berücksichtigen.
Vererbungsbereich
Der Geltungsbereich ist spezifisch für den Controller. Wenn wir verschachtelte Controller definieren, erbt der untergeordnete Controller den Umfang seines übergeordneten Steuerelements.
<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>
Die folgenden wichtigen Punkte sind im obigen Beispiel zu berücksichtigen.
Beispiel
Das folgende Beispiel demonstriert alle oben genannten Befehle.
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>
Ergebnisse
Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.