Escopo do AngularJS
O escopo é a parte de ligação entre o HTML (visualização) e o JavaScript (controlador).
O escopo é um objeto com as propriedades e métodos disponíveis.
O escopo está disponível tanto para a visualização quanto para o controlador.
Como usar o escopo?
Ao fazer um controller em AngularJS, você passa o $scopeobjeto como argumento:
Exemplo
Propriedades feitas no controller, podem ser referenciadas na view:
<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>
Ao adicionar propriedades ao $scope
objeto no controlador, a visualização (HTML) obtém acesso a essas propriedades.
Na exibição, você não usa o prefixo $scope, apenas se refere a um nome de propriedade, como {{carname}}.
Entendendo o Escopo
Se considerarmos que um aplicativo AngularJS consiste em:
- View, que é o HTML.
- Model, que são os dados disponíveis para a visualização atual.
- Controller, que é a função JavaScript que faz/altera/remove/controla os dados.
Então o escopo é o Modelo.
O escopo é um objeto JavaScript com propriedades e métodos, que estão disponíveis tanto para a visualização quanto para o controlador.
Exemplo
Se você fizer alterações na visualização, o modelo e o controlador serão atualizados:
<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>
Conheça seu escopo
É importante saber com qual escopo você está lidando, a qualquer momento.
Nos dois exemplos acima, há apenas um escopo, portanto, conhecer seu escopo não é um problema, mas para aplicativos maiores, pode haver seções no HTML DOM que podem acessar apenas determinados escopos.
Exemplo
Ao lidar com a ng-repeatdiretiva, cada repetição tem acesso ao objeto de repetição atual:
<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>
Cada <li>elemento tem acesso ao objeto de repetição atual, neste caso uma string, que é referenciada usando x.
Escopo Raiz
Todas as aplicações possuem um $rootScopeescopo criado no elemento HTML que contém a ng-appdiretiva.
O rootScope está disponível em todo o aplicativo.
Se uma variável tiver o mesmo nome no escopo atual e no rootScope, o aplicativo usará aquele no escopo atual.
Exemplo
Uma variável chamada "color" existe tanto no escopo do controlador quanto no 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>