Rozsah AngularJS
Rozsah je spojovací částí mezi HTML (zobrazení) a JavaScriptem (řadič).
Rozsah je objekt s dostupnými vlastnostmi a metodami.
Rozsah je k dispozici pro pohled i ovladač.
Jak používat rozsah?
Když vytvoříte ovladač v AngularJS, předáte $scopeobjekt jako argument:
Příklad
Vlastnosti provedené v ovladači lze zobrazit v pohledu:
<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>
Při přidávání vlastností k $scope
objektu v řadiči získá zobrazení (HTML) přístup k těmto vlastnostem.
V zobrazení nepoužíváte předponu $scope, pouze odkazujete na název vlastnosti, například {{carname}}.
Pochopení rozsahu
Pokud považujeme aplikaci AngularJS za sestávající z:
- View, což je HTML.
- Model, což jsou data dostupná pro aktuální pohled.
- Controller, což je funkce JavaScriptu, která vytváří/mění/odebírá/řídí data.
Pak rozsah je Model.
Rozsah je objekt JavaScriptu s vlastnostmi a metodami, které jsou k dispozici pro pohled i ovladač.
Příklad
Pokud provedete změny v pohledu, model a ovladač budou aktualizovány:
<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>
Poznejte svůj rozsah
Je důležité vědět, s jakým rozsahem máte co do činění, kdykoli.
Ve dvou výše uvedených příkladech je pouze jeden rozsah, takže znalost vašeho rozsahu není problém, ale pro větší aplikace mohou být v HTML DOM sekce, které mají přístup pouze k určitým rozsahům.
Příklad
Při práci s ng-repeatdirektivou má každé opakování přístup k aktuálnímu objektu opakování:
<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>
Každý <li>prvek má přístup k aktuálnímu objektu opakování, v tomto případě k řetězci, na který se odkazuje pomocí x.
Kořenový rozsah
Všechny aplikace mají a $rootScopekterý je rozsah vytvořený v prvku HTML, který obsahuje ng-appdirektivu.
RootScope je k dispozici v celé aplikaci.
Pokud má proměnná stejný název v aktuálním oboru i v rootScope, aplikace použije ten v aktuálním oboru.
Příklad
Proměnná s názvem "color" existuje jak v rozsahu ovladače, tak v 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>