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

Область видимости — это связующее звено между HTML (представлением) и JavaScript (контроллером).

Область видимости — это объект с доступными методами и свойствами.

Область видимости можно применять к представлениям и контроллерам.

Как использовать область видимости

Когда вы создаете контроллер в AngularJS, вы можете передать объект$scopeв качестве параметра:

Пример AngularJS

Свойства в контроллере соответствуют свойствам в представлении:

<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, которая может добавлять или изменять свойства.

scope — это модель.

scope — это объект JavaScript со свойствами и методами, и эти свойства и методы можно использовать в представлениях и контроллерах.

Пример AngularJS

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

<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>Нажми меня</button> </div> <script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Пример"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; });
</script>

Попробуйте »

Диапазон области видимости

Очень важно понимать область видимости, которую вы используете в данный момент.

В двух приведённых выше примерах есть только одна область видимости, поэтому это относительно просто, но в больших проектах в HTML DOM есть несколько областей видимости, и вам нужно знать, какую область видимости вы используете.

Пример AngularJS

Когда мы используем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, можно использовать в каждом контроллере.

Пример AngularJS

При создании контроллера передайте $rootScope в качестве параметра, и его можно использовать в приложении:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}}Члены семьи:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

Попробуйте »
Другие расширения