AngularJS-Bereich
Der Gültigkeitsbereich ist der bindende Teil zwischen dem HTML (View) und dem JavaScript (Controller).
Der Geltungsbereich ist ein Objekt mit den verfügbaren Eigenschaften und Methoden.
Der Bereich ist sowohl für die Ansicht als auch für den Controller verfügbar.
Wie verwende ich den Bereich?
Wenn Sie einen Controller in AngularJS erstellen, übergeben Sie das $scopeObjekt als Argument:
Beispiel
In der Steuerung vorgenommene Eigenschaften, auf die in der Ansicht verwiesen werden kann:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script>
Beim Hinzufügen von Eigenschaften zum $scope
Objekt im Controller erhält die Ansicht (HTML) Zugriff auf diese Eigenschaften.
In der Ansicht verwenden Sie nicht das Präfix $scope, sondern beziehen sich nur auf einen Eigenschaftsnamen wie {{carname}}.
Den Geltungsbereich verstehen
Wenn wir davon ausgehen, dass eine AngularJS-Anwendung besteht aus:
- View, das ist das HTML.
- Modell, bei dem es sich um die für die aktuelle Ansicht verfügbaren Daten handelt.
- Controller, das ist die JavaScript-Funktion, die die Daten erstellt/ändert/entfernt/kontrolliert.
Dann ist der Geltungsbereich das Modell.
Der Scope ist ein JavaScript-Objekt mit Eigenschaften und Methoden, die sowohl für die Ansicht als auch für den Controller verfügbar sind.
Beispiel
Wenn Sie Änderungen in der Ansicht vornehmen, werden das Modell und der Controller aktualisiert:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
Kennen Sie Ihren Umfang
Es ist wichtig, jederzeit zu wissen, mit welchem Umfang Sie es zu tun haben.
In den beiden obigen Beispielen gibt es nur einen Bereich, daher ist es kein Problem, Ihren Bereich zu kennen, aber für größere Anwendungen kann es Abschnitte im HTML-DOM geben, die nur auf bestimmte Bereiche zugreifen können.
Beispiel
Beim Umgang mit der ng-repeatDirektive hat jede Wiederholung Zugriff auf das aktuelle Wiederholungsobjekt:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
Jedes <li>Element hat Zugriff auf das aktuelle Wiederholungsobjekt, in diesem Fall eine Zeichenkette, auf die mit verwiesen wird x.
Root-Bereich
Alle Anwendungen haben einen $rootScopeGültigkeitsbereich, der für das HTML-Element erstellt wird, das die ng-appDirektive enthält.
Der rootScope ist in der gesamten Anwendung verfügbar.
Wenn eine Variable im aktuellen Gültigkeitsbereich und im rootScope denselben Namen hat, verwendet die Anwendung den Namen im aktuellen Gültigkeitsbereich.
Beispiel
Eine Variable mit dem Namen "color" existiert sowohl im Bereich des Controllers als auch im rootScope:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body>