Область действия AngularJS
Область видимости является связующим звеном между HTML (представлением) и JavaScript (контроллером).
Область видимости — это объект с доступными свойствами и методами.
Область доступна как для представления, так и для контроллера.
Как использовать сферу?
Когда вы создаете контроллер в AngularJS, вы передаете $scopeобъект в качестве аргумента:
Пример
На свойства, сделанные в контроллере, можно ссылаться в представлении:
<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>
При добавлении свойств к $scope
объекту в контроллере представление (HTML) получает доступ к этим свойствам.
В представлении вы не используете префикс $scope, вы просто ссылаетесь на имя свойства, например {{carname}}.
Понимание области
Если мы считаем, что приложение AngularJS состоит из:
- Представление, которое представляет собой HTML.
- Модель, которая является данными, доступными для текущего представления.
- Контроллер — функция JavaScript, которая создает/изменяет/удаляет/управляет данными.
Тогда областью является Модель.
Область видимости — это объект JavaScript со свойствами и методами, доступными как для представления, так и для контроллера.
Пример
Если вы внесете изменения в представление, модель и контроллер будут обновлены:
<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>
Знай свой масштаб
Важно знать, с какой областью вы имеете дело, в любое время.
В двух приведенных выше примерах есть только одна область, поэтому знание вашей области не является проблемой, но для более крупных приложений в HTML DOM могут быть разделы, которые могут иметь доступ только к определенным областям.
Пример
При работе с ng-repeatдирективой каждое повторение имеет доступ к текущему объекту повторения:
<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>
Каждый <li>элемент имеет доступ к текущему объекту повторения, в данном случае к строке, на которую ссылаются с помощью x.
Корневая область
Все приложения имеют $rootScopeобласть действия, созданную для элемента HTML, содержащего ng-appдирективу.
rootScope доступен во всем приложении.
Если переменная имеет одинаковое имя как в текущей области, так и в корневой области, приложение использует имя в текущей области.
Пример
Переменная с именем «color» существует как в области действия контроллера, так и в области 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>