AngularJS Scope

Het scope (scope) is het bindende deel tussen HTML (view) en JavaScript (controller).

Het scope is een object dat beschikbare eigenschappen en methoden heeft.

Het scope is beschikbaar voor zowel de view als de controller.

Hoe kan je het scope gebruiken?

Wanneer je een controller maakt in AngularJS, zul je $scope Objecten als parameter worden doorgegeven:

Voorbeeld

Eigenschappen die in de controller worden gecreëerd, kunnen worden gerefereerd naar in de view:

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

Try It Yourself

Wanneer je in de controller $scope Objecten eigenschappen toe te voegen, kan de weergave (HTML) deze eigenschappen bereiken.

In de weergave, gebruik je $scope Voorvoegsel, je hoeft alleen een eigenschapsnaam te refereren, zoals {{carname}}.

Begrijp het domein

Als we de AngularJS-applicatie zien als bestaat uit de volgende delen:

  • Weergave, HTML.
  • Model, de gegevens die beschikbaar zijn voor de huidige weergave.
  • Controller, een JavaScript-functie, wordt gebruikt om gegevens te creëren/wijzigen/verwijderen/te controleren.

Dan is het domein het model.

Een domein is een JavaScript-object met eigenschappen en methoden die zowel voor de weergave als de controller beschikbaar zijn.

Voorbeeld

Als je in de weergave hebt gewijzigd, worden het model en de controller bijgewerkt:

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

Try It Yourself

Begrijp je domein

Het is altijd belangrijk om te begrijpen welk domein je aan het verwerken bent.

In de bovenstaande twee voorbeelden is er slechts één domein, dus het begrijpen van je domein is geen probleem, maar voor grotere applicaties kunnen sommige delen van de HTML DOM alleen toegang hebben tot bepaalde domeinen.

Voorbeeld

Bij het verwerken van de ng-repeat-instructie kan bij elke herhaling het huidige herhalingsobject worden bereikt:

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

Try It Yourself

Elke <li> Elementen kunnen het huidige herhalingsobject bereiken, in dit voorbeeld een string, door gebruik te maken van x om naar te verwijzen.

rootscope

Elke applicatie heeft een $rootScope，het bevindt zich in de ng-app Domein dat is gecreëerd op de HTML-elementen van de instructie.

rootScope is over het hele applicatiegebied beschikbaar.

Als een variabele dezelfde naam heeft in het huidige domein en de rootScope, gebruikt het de variabele in het huidige domein.

Voorbeeld

Er bevindt zich in het domein van de controller en in rootScope een variabele genaamd "color":

<body ng-app="myApp">
<p>De favoriete kleur van de rootScope:</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>

Try It Yourself