AngularJS-bereik
De scope is het bindende deel tussen de HTML (view) en de JavaScript (controller).
Het bereik is een object met de beschikbare eigenschappen en methoden.
De scope is beschikbaar voor zowel de view als de controller.
Hoe de reikwijdte te gebruiken?
Wanneer je een controller maakt in AngularJS, geef je het $scopeobject door als argument:
Voorbeeld
Eigenschappen gemaakt in de controller, kan worden verwezen in de weergave:
<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>
Bij het toevoegen van eigenschappen aan het $scope
object in de controller krijgt de view (HTML) toegang tot deze eigenschappen.
In de weergave gebruikt u het voorvoegsel niet $scope, u verwijst alleen naar een eigenschapsnaam, zoals {{carname}}.
De reikwijdte begrijpen
Als we ervan uitgaan dat een AngularJS-applicatie bestaat uit:
- View, dat is de HTML.
- Model, dit zijn de gegevens die beschikbaar zijn voor de huidige weergave.
- Controller, dit is de JavaScript-functie die de gegevens maakt/wijzigt/verwijdert/controleert.
Dan is de scope het Model.
De scope is een JavaScript-object met eigenschappen en methoden, die beschikbaar zijn voor zowel de view als de controller.
Voorbeeld
Als u wijzigingen aanbrengt in de weergave, worden het model en de controller bijgewerkt:
<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>
Ken uw bereik
Het is belangrijk om op elk moment te weten met welke scope u te maken heeft.
In de twee bovenstaande voorbeelden is er slechts één bereik, dus het is geen probleem om uw bereik te kennen, maar voor grotere toepassingen kunnen er secties in de HTML DOM zijn die alleen toegang hebben tot bepaalde bereiken.
Voorbeeld
Bij het omgaan met de ng-repeatrichtlijn heeft elke herhaling toegang tot het huidige herhalingsobject:
<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>
Elk <li>element heeft toegang tot het huidige herhalingsobject, in dit geval een string, waarnaar wordt verwezen met x.
Wortelbereik
Alle toepassingen hebben een $rootScopedie het bereik is dat is gemaakt op het HTML-element dat de ng-apprichtlijn bevat.
De rootScope is beschikbaar in de gehele applicatie.
Als een variabele dezelfde naam heeft in zowel het huidige bereik als in het rootScope, gebruikt de toepassing die in het huidige bereik.
Voorbeeld
Een variabele met de naam "kleur" bestaat zowel in het bereik van de controller als in de 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>