Zakresy AngularJS

Zakres (scope) to część, która łączy HTML (widok) i JavaScript (kontroler).

Zakres to obiekt posiadający dostępne atrybuty i metody.

Zakres jest dostępny zarówno dla widoku, jak i kontrolera.

Jak używać zakresu?

Kiedy tworzysz kontroler w AngularJS, będziesz $scope Obiekt jako parametr przekazywany:

Przykład

Atrybuty utworzone w kontrolerze mogą być odwoływane 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>

Spróbuj sam

Kiedy w kontrolerze do $scope dodając atrybuty do obiektu, widok (HTML) może uzyskać dostęp do tych atrybutów.

W widoku, nie używasz $scope Przedrostek, wystarczy odnieść się do nazwy atrybutu, np. {{carname}}.

Zrozumienie zakresu

Jeśli uważamy AngularJS aplikację za złożoną z kilku części:

  • Widok, to HTML.
  • Model, to dane dostępne dla bieżącego widoku.
  • Kontroler, to funkcja JavaScript, używana do tworzenia/modyfikowania/usuwania/kontrolowania danych.

Zatem zakres to model.

Zakres to obiekt JavaScript, który ma atrybuty i metody dostępne zarówno dla widoku, jak i kontrolera.

Przykład

Jeśli dokonasz zmiany w widoku, model i kontroler zostaną zaktualizowane:

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

Spróbuj sam

Zrozumienie swojego zakresu

W każdym momencie zrozumienie zakresu, nad którym pracujesz, jest bardzo ważne.

W powyższych dwóch przykładach istnieje tylko jeden zakres, więc zrozumienie swojego zakresu nie jest problemem, ale dla większych aplikacji niektóre części HTML DOM mogą mieć dostęp tylko do niektórych zakresów.

Przykład

Podczas przetwarzania instrukcji ng-repeat, w każdym powtórzeniu można uzyskać dostęp do bieżącego powtarzającego obiektu:

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

Spróbuj sam

Każdy <li> Elementy mogą uzyskać dostęp do bieżącego powtarzającego obiektu, w tym przypadku łańcucha, poprzez użycie x do odniesienia.

zakres root

Każda aplikacja ma $rootScopejest to, co zawiera ng-app Zakres utworzony na elemencie HTML przez instrukcję.

rootScope jest dostępny w całej aplikacji.

Jeśli zmienna ma tę samą nazwę w bieżącym zakresie i w zakresie rootScope, aplikacja użyje zmiennej z bieżącego zakresu.

Przykład

W zakresie kontrolera i rootScope istnieje zmienna o nazwie "color":

<body ng-app="myApp">
<p>Ulubiony kolor rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Zakres ulubionego koloru kontrolera:</p>
  <h1>{{color}}</h1>
</div>
<p>Ulubiony kolor rootScope'a wciąż jest:</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>

Spróbuj sam