AngularJS-Bereich

Der Scope (scope) ist der verbindende Teil zwischen HTML (Ansicht) und JavaScript (Steuerung).

Der Scope ist ein Objekt mit verfügbaren Eigenschaften und Methoden.

Der Scope ist sowohl für die Ansicht als auch für den Controller verfügbar.

Wie verwendet man den Scope?

Wenn Sie in AngularJS einen Controller erstellen, werden Sie $scope Objekte als Parameter übergeben:

Beispiel

In der Steuerung erstellte Eigenschaften können im View zitiert werden:

<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>

Probieren Sie es selbst aus

Wenn man im Controller $scope Objekte hinzufügen, kann das View (HTML) auf diese Attribute zugreifen.

Im View verwenden Sie $scope Präfix, Sie müssen nur einen Attributnamen referenzieren, zum Beispiel {{carname}}。

Verstehen Sie den Kontext

Wenn wir die AngularJS-Anwendung als aus folgenden Teilen besteht:

  • Das View, das HTML ist.
  • Das Modell, die Daten, die der aktuelle View zur Verfügung stehen.
  • Der Controller, eine JavaScript-Funktion, die zum Erstellen/Ändern/Entfernen/Steuern von Daten verwendet wird.

Dann ist der Kontext das Modell.

Ein Kontext ist ein JavaScript-Objekt mit Attributen und Methoden, die sowohl für das View als auch für den Controller zugänglich sind.

Beispiel

Wenn Sie im View geändert haben, wird das Modell und der Controller aktualisiert:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Mein Name ist {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Probieren Sie es selbst aus

Verstehen Sie Ihren Kontext

Es ist jederzeit wichtig, den Kontext zu verstehen, mit dem man arbeitet.

In den beiden obigen Beispielen gibt es nur einen Kontext, daher ist es nicht schwierig, den Kontext zu verstehen, aber für größere Anwendungen können einige Teile des HTML-DOM möglicherweise nur auf bestimmte Kontexte zugreifen.

Beispiel

Bei der Verarbeitung der ng-repeat-Anweisung kann jeder Wiedergabezyklus auf das aktuelle wiederholte Objekt zugreifen:

<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>

Probieren Sie es selbst aus

jeder <li> Elemente können den aktuellen wiederholten Objekt zugreifen, im Beispiel ein String, indem man x zur Referenz verwendet.

einen Rootkontext

Alle Anwendungen haben $rootScope，das ist das, was in ng-app Ein Kontext, der auf HTML-Elementen durch Anweisungen erstellt wird.

Der rootScope ist im gesamten Anwendungsbereich verfügbar.

Wenn eine Variable denselben Namen im aktuellen Kontext und im rootScope hat, wird die Variable im aktuellen Kontext verwendet.

Beispiel

Es gibt eine Variable namens "color" sowohl im Kontext des Controllers als auch im rootScope:

<body ng-app="myApp">
<p>Die Lieblingsfarbe des rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Der Bereich der Lieblingsfarbe des Controllers:</p>
  <h1>{{color}}</h1>
</div>
<p>Die Lieblingsfarbe des RootScopes ist immer noch:</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>

Probieren Sie es selbst aus