AngularJS Omvang
Die omvang is die bindende deel tussen die HTML (aansig) en die JavaScript (beheerder).
Die omvang is 'n voorwerp met die beskikbare eienskappe en metodes.
Die omvang is beskikbaar vir beide die aansig en die kontroleerder.
Hoe om die omvang te gebruik?
Wanneer jy 'n kontroleerder in AngularJS maak, gee jy die $scopevoorwerp as 'n argument deur:
Voorbeeld
Eienskappe wat in die kontroleerder gemaak is, kan in die aansig verwys word:
<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>
Wanneer eienskappe by die $scope
objek in die kontroleerder gevoeg word, kry die aansig (HTML) toegang tot hierdie eienskappe.
In die aansig gebruik jy nie die voorvoegsel nie $scope, jy verwys net na 'n eiendomnaam, soos {{carname}}.
Verstaan die Omvang
As ons beskou dat 'n AngularJS-toepassing bestaan uit:
- View, wat die HTML is.
- Model, wat die data is wat beskikbaar is vir die huidige aansig.
- Beheerder, wat die JavaScript-funksie is wat die data maak/verander/verwyder/beheer.
Dan is die omvang die Model.
Die omvang is 'n JavaScript-objek met eienskappe en metodes, wat beskikbaar is vir beide die aansig en die kontroleerder.
Voorbeeld
As jy veranderinge in die aansig maak, sal die model en die kontroleerder opgedateer word:
<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 jou omvang
Dit is belangrik om te eniger tyd te weet met watter omvang jy te doen het.
In die twee voorbeelde hierbo is daar net een omvang, so om jou omvang te ken is nie 'n probleem nie, maar vir groter toepassings kan daar afdelings in die HTML DOM wees wat slegs toegang tot sekere bestekke het.
Voorbeeld
Wanneer die ng-repeatopdrag hanteer word, het elke herhaling toegang tot die huidige herhalingsvoorwerp:
<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>
Elke <li>element het toegang tot die huidige herhalingsvoorwerp, in hierdie geval 'n string, waarna verwys word deur x.
Wortel Omvang
Alle toepassings het 'n $rootScopewat die omvang is wat geskep is op die HTML-element wat die ng-apprichtlijn bevat.
Die rootScope is beskikbaar in die hele toepassing.
As 'n veranderlike dieselfde naam in beide die huidige omvang en in die rootScope het, gebruik die toepassing die een in die huidige omvang.
Voorbeeld
'n Veranderlike genaamd "kleur" bestaan in beide die beheerder se omvang en in die 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>