Область является обязательным часть между HTML (вид) и JavaScript (контроллер).
Область является объектом с имеющимися свойствами и методами.
Область доступна как для просмотра и контроллера.
Как использовать Scope?
Когда вы делаете контроллер в 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 , вы просто обратитесь к PROPERTYNAME, как {{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 доступен во всем приложении.
Если переменная имеет такое же имя, как в текущей области и в rootScope, приложение использовать один в текущей области.
пример
Переменная с именем "цвет" существует в области видимости и контроллер, и в 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> Попробуй сам "