Zakres AngularJS
Zakres jest częścią łączącą HTML (widok) i JavaScript (kontroler).
Zakres to obiekt z dostępnymi właściwościami i metodami.
Zakres jest dostępny zarówno dla widoku, jak i kontrolera.
Jak korzystać z zakresu?
Kiedy tworzysz kontroler w AngularJS, przekazujesz $scopeobiekt jako argument:
Przykład
Do właściwości wykonanych w kontrolerze można się odwoływać w widoku:
<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>
Podczas dodawania właściwości do $scope
obiektu w kontrolerze widok (HTML) uzyskuje dostęp do tych właściwości.
W widoku nie używasz prefiksu $scope, po prostu odwołujesz się do nazwy właściwości, na przykład {{carname}}.
Zrozumienie zakresu
Jeśli uznamy, że aplikacja AngularJS składa się z:
- Widok, który jest kodem HTML.
- Model, czyli dane dostępne dla bieżącego widoku.
- Kontroler, czyli funkcja JavaScript, która tworzy/zmienia/usuwa/kontroluje dane.
Wtedy zakresem jest Model.
Zakres to obiekt JavaScript z właściwościami i metodami, które są dostępne zarówno dla widoku, jak i kontrolera.
Przykład
Jeśli dokonasz zmian w widoku, model i kontroler zostaną zaktualizowane:
<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>
Poznaj swój zakres
Ważne jest, aby w dowolnym momencie wiedzieć, z jakim zakresem masz do czynienia.
W dwóch powyższych przykładach jest tylko jeden zakres, więc znajomość swojego zakresu nie stanowi problemu, ale w przypadku większych aplikacji mogą istnieć sekcje w DOM HTML, które mają dostęp tylko do niektórych zakresów.
Przykład
W przypadku ng-repeatdyrektywy każde powtórzenie ma dostęp do bieżącego obiektu powtórzenia:
<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żdy <li>element ma dostęp do bieżącego obiektu powtórzenia, w tym przypadku ciągu, do którego odwołuje się using x.
Zakres główny
Wszystkie aplikacje mają a $rootScopewhich jest zakresem utworzonym na elemencie HTML zawierającym ng-appdyrektywę.
rootScope jest dostępny w całej aplikacji.
Jeśli zmienna ma taką samą nazwę zarówno w bieżącym zakresie, jak iw głównym zakresie, aplikacja użyje tej z bieżącego zakresu.
Przykład
Zmienna o nazwie „color” istnieje zarówno w zakresie kontrolera, jak i w 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>