Объект $scope

Последнее обновление: 1.11.2015

Объект $scope служит связующим звеном между представлением в виде кода html и контроллером. Объект $scope выполняет роль модели приложения. В $scope определяются любые объекты, которые можно использовать в представлении и к которым можно устанавливать привязку данных. Формально $scope представляет обычный javascript-объект.

Каждое приложение AngularJS имеет один объект $rootScope, который является родительским по отношению ко всем остальным объектам $scope, которые используются в контроллерах. И при запуске приложения создается привязка элемента, в котором используется директива ng-app, к объекту $rootScope. То есть это такой глобальный объект $scope, который мы можем использовать по всему приложению. Например:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
</head>
<body>
<p>Модуль: {{ moduleName }}</p>
<p>Сообщение: {{ message }}</p>
<script src="js/lib/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
	.run(function($rootScope) {
	$rootScope.moduleName = "myApp";
	$rootScope.message = "Hello AngularJS";
});
</script>
</body>
</html>

Здесь у модуля используется метод run(callback), который регистрирует функцию, вызываемую при загрузке модуля. В этой функции устанавливается объект $rootScope.

Так как модуль применяется к корневому элементу страницы html (<html ng-app="myApp">), то внутри этого элемента в любой части будут доступны свойства и методы, определенные в $rootScope. То есть элемент html представляет контекст или область видимости, в которой мы можем использовать свойства и методы, определенные в $rootScope.

Подобно модулю контроллеры также могут устанавливать контекст и определять использовать свой объект $scope:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
</head>
<body>
	<h2>{{ message }}</h2>
	<div ng-controller="myController">
		<h3>{{ message }}</h3>
	</div>
	<h4>{{ message }}</h4>
<script src="js/lib/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', [])
	.run(function($rootScope) {
	
	$rootScope.message = "Модуль myApp";
});
myApp.controller('myController', function($scope) {
	$scope.message = "Контроллер myController";
});
</script>
</body>
</html>
Scopes in AngularJS

И при создании модуля, и при создании контроллера устанавливается свойство message, значение которого затем три раза выводится на странице.

Но для блока div устанавливается директива ng-controller, которая связывает его с контроллером myController. Директива ng-controller создает новый объект $scope, который является дочерним по отношению к глобальному $rootScope и который переопределяет его действие. В то же время область действия объекта $scope, установленного в контроллере, задается только этим блоком div, и вне его $scope уже не действует.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850