Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung des Umfangs in AngularJS_AngularJS

Detaillierte Erläuterung des Umfangs in AngularJS_AngularJS

WBOY
Freigeben: 2016-05-16 15:54:32
Original
1230 Leute haben es durchsucht

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>

Nach dem Login kopieren

Die folgenden wichtigen Punkte sind im obigen Beispiel zu berücksichtigen.

  • $scope wird als erster Parameter in seinem Konstruktor verwendet, um den Zeiger auf den Controller zu bestimmen.
  • $scope.message und $scope.type sind die Modelle, die sie in HTML-Seiten verwenden.
  • Die Werte des von uns festgelegten Modells werden im Controller shapeController des Anwendungsmoduls widergespiegelt.
  • Wir können Funktionsfunktionen in $scope definieren.

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>

Nach dem Login kopieren

Die folgenden wichtigen Punkte sind im obigen Beispiel zu berücksichtigen.

  • Wir legen den Wert des Modells in shapeController fest.
  • Die CircleController-Nachricht des untergeordneten Controllers, die wir überschreiben. Die überschriebene Nachricht wird verwendet, wenn das Modul „message“ des Controllers CircleController verwendet wird.

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>

Nach dem Login kopieren

Ergebnisse

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.

2015617110218233.jpg (560×429)

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage