Область видимости AngularJS

Область видимости (scope) - это часть привязки между 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>Мое имя {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</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он расположен в ng-app Область действия, созданная на HTML-элементе с инструкцией.

rootScope доступен во всем приложении.

Если у переменной в текущей области действия и корневой области (rootScope) есть одно и то же имя, приложение использует переменную из текущей области действия.

Пример

В области действия контроллера и rootScope существует переменная с именем "color":

<body ng-app="myApp">
<p>Изменение цвета favorito корневого объекта:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Область видимости любимого цвета контроллера:</p>
  <h1>{{color}}</h1>
</div>
<p>Излюбленный цвет rootScope по-прежнему:</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>

Попробуйте сами