Der Umfang ist das Bindeteil zwischen dem HTML (Ansicht) und dem JavaScript (Controller).
Der Umfang ist ein Objekt mit den verfügbaren Eigenschaften und Methoden.
Der Umfang ist sowohl für die Ansicht und den Controller zur Verfügung.
Wie die Scope zu verwenden?
Wenn Sie einen Controller in AngularJS machen, übergeben Sie die $scope - Objekt als Argument:
Beispiel
Eigenschaften in der Steuerung vorgenommen, kann in der Ansicht bezeichnet 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> Versuch es selber " Wenn Eigenschaften zum Hinzufügen von $scope Objekt in der Steuerung, wird die Ansicht (HTML) den Zugriff auf diese Eigenschaften.
In der Ansicht, Sie das Präfix nicht verwenden $scope , die Sie gerade auf einen Eigenschaftsname verweisen, wie {{carname}} .
Das Verständnis der Scope
Wenn man bedenkt, eine AngularJS Anwendung bestehen aus:
- Sehen Sie, was die HTML ist.
- Modell, das die Daten für die aktuelle Ansicht ist.
- Controller, der die JavaScript-Funktion ist, die macht / Änderungen / entfernt / die Daten steuert.
Dann ist der Umfang der Modell.
Der Umfang ist ein JavaScript-Objekt mit Eigenschaften und Methoden, die sowohl für die Ansicht zur Verfügung stehen und die Steuerung.
Beispiel
Wenn Sie Änderungen in der Ansicht zu machen, wird das Modell und die Steuerung aktualisiert werden:
<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> Versuch es selber " Kennen Sie Ihre Scope
Es ist wichtig zu wissen, welchen Bereich Sie mit, jederzeit zu tun haben.
In den beiden oben genannten Beispielen gibt es nur einen Rahmen, so wissen, Ihr Umfang ist kein Problem, aber für größere Anwendungen können dort Abschnitte im HTML-DOM, die nur bestimmte Bereiche zugreifen können.
Beispiel
Wenn es mit dem Umgang ng-repeat - Richtlinie hat jeder Wiederholung Zugriff auf die aktuelle Wiederholung Objekt:
<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>
Versuch es selber " Jedes <li> Element hat Zugriff auf den aktuellen Wiederholungsobjekt, in diesem Fall eine Zeichenkette, die bezeichnet wird durch Verwendung von x .
Stammbereich
Alle Anwendungen haben einen $rootScope , die den Umfang auf dem HTML - Element erstellt ist, die die enthält ng-app - Richtlinie.
Die rootScope ist in der gesamten Anwendung zur Verfügung.
Wenn eine Variable den gleichen Namen sowohl im aktuellen Bereich und in der rootScope, verwenden Sie die Anwendung die einen in dem aktuellen Bereich.
Beispiel
Eine Variable mit dem Namen "Farbe" gibt es sowohl in den Anwendungsbereich des Controllers und 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> Versuch es selber "