Zakres jest częścią wiązania pomiędzy HTML (Widok) oraz JavaScript (kontrolera).
Zakres jest obiektem z dostępnych właściwości i metod.
Zakres jest dostępna zarówno dla widzenia i sterownika.
Jak używać Scope?
Po dokonaniu kontroler w angularjs, mijamy $scope przedmiotu jako argument:
Przykład
Właściwości wykonane w sterowniku, można określić z punktu widzenia:
<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 " Podczas dodawania właściwości do $scope przedmiotu w regulatorze, widok (HTML) uzyskuje dostęp do tych właściwości.
W widoku, aby nie używać przedrostka $scope , wystarczy odwołać się do PROPERTYNAME, jak {{carname}} .
Zrozumienie Zakres
Jeśli weźmiemy pod uwagę to angularjs aplikacji składa się z:
- Zobacz, co jest HTML.
- Modele, które jest dostępne dane dla bieżącego widoku.
- Sterownik, który jest funkcją JavaScript, który sprawia, że zmiany / / usuwanie / kontrola danych.
Wtedy to zakres modelu.
Zakres jest obiekt JavaScript z właściwości i metod, które są dostępne zarówno dla widoku i kontrolera.
Przykład
Jeśli dokonasz zmian w widoku model i sterownik zostanie zaktualizowany:
<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> Spróbuj sam " Know Your Zakres
Ważne jest, aby wiedzieć, które Zakres masz do czynienia, w dowolnym momencie.
W obu powyższych przykładach jest tylko jeden zakres, więc wiedząc, Twój zakres nie jest problemem, ale dla większych aplikacji może istnieć sekcje HTML DOM, które mają dostęp tylko do określonych zakresów.
Przykład
Gdy mamy do czynienia z ng-repeat dyrektywy każde powtórzenie ma dostęp do bieżącego obiektu powtarzania:
<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> element ma dostęp do bieżącego obiektu powtarzania, w tym przypadku ciąg, które są przekazywane za pomocą x .
korzeń Zakres
Wszystkie aplikacje mają $rootScope który jest zakres utworzony na elemencie HTML zawierającej ng-app dyrektywę.
RootScope jest dostępna w całym zastosowania.
Jeśli zmienna ma taką samą nazwę zarówno w bieżącym zakresie iw rootScope aplikacja użyć jednego w bieżącym zakresie.
Przykład
Zmienna o nazwie "kolor" istnieje w zakresie zarówno kontrolera aw 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> Spróbuj sam "