AngularJS Scope

Scope ist die Verbindung zwischen HTML (Ansicht) und JavaScript (Controller).

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

Scope kann auf Ansichten und Controller angewendet werden.

So verwenden Sie Scope

Wenn Sie in AngularJS einen Controller erstellen, können Sie$scopedas Objekt als Parameter übergeben:

AngularJS-Beispiel

Eigenschaften im Controller entsprechen Eigenschaften in der Ansicht:

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

Ausprobieren »

Wenn Sie im Controller$scopedas Objekt hinzufügen, kann die Ansicht (HTML) diese Eigenschaften abrufen.

In der Ansicht müssen Sie nicht$scopePräfix hinzufügen, sondern nur den Eigenschaftsnamen, wie zum Beispiel:{{carname}}。

Scope-Übersicht

Eine AngularJS-Anwendung besteht aus Folgendem:

  • View, d.h. HTML.
  • Model, die in der aktuellen View verfügbaren Daten.
  • Controller, d.h. eine JavaScript-Funktion, die Eigenschaften hinzufügen oder ändern kann.

scope ist das Model.

scope ist ein JavaScript-Objekt mit Eigenschaften und Methoden, und diese Eigenschaften und Methoden können in Views und Controllern verwendet werden.

AngularJS-Beispiel

Wenn Sie die View ändern, werden das Model und der Controller entsprechend aktualisiert.

<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>Klick mich</button> </div> <script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Beispiel"; $scope.sayHello = function() { $scope.greeting = 'Hallo ' + $scope.name + '!'; }; });
</script>

Ausprobieren »

Scope-Bereich

Es ist sehr wichtig, den Scope zu verstehen, den Sie gerade verwenden.

In den beiden obigen Beispielen gibt es nur einen Scope, daher ist es relativ einfach, aber in großen Projekten gibt es mehrere Scopes im HTML-DOM, und Sie müssen wissen, welcher Scope der ist, den Sie verwenden.

AngularJS-Beispiel

Wenn wirng-repeatdie Direktive verwenden, greift jedes wiederholte Element auf das aktuelle wiederholte Objekt zu:

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

Ausprobieren »

Jedes<li>Element kann auf das aktuelle wiederholte Objekt zugreifen, das hier einem String entspricht, und verwendet die Variablex, um es darzustellen.

Root-Scope

Alle Anwendungen haben einen$rootScope, der aufng-appalle HTML-Elemente wirken kann, die von der Direktive enthalten sind.

$rootScopeEr kann auf die gesamte Anwendung wirken. Er ist eine Brücke zwischen Scopes in verschiedenen Controllern. Mit rootscope definierte Werte können in jedem Controller verwendet werden.

AngularJS-Beispiel

Beim Erstellen eines Controllers übergeben Sie $rootScope als Parameter, und er kann in der Anwendung verwendet werden:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}}Familienmitglieder:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

Ausprobieren »
Andere Erweiterungen