O escopo é a parte de ligação entre o HTML (vista) eo JavaScript (controlador).
O escopo é um objeto com as propriedades e métodos disponíveis.
O escopo está disponível tanto para a vista eo controlador.
Como usar o escopo?
Quando você faz um controlador em AngularJS, você passa o $scope objeto como um argumento:
Exemplo
Propriedades feitas no controlador, podem ser referidas no ponto de vista:
<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> Tente você mesmo " Ao adicionar propriedades para o $scope objeto no controlador, a vista (HTML) tem acesso a essas propriedades.
No modo de exibição, você não usar o prefixo $scope , basta referir a um propertyname, como {{carname}} .
Compreender o Âmbito
Se considerarmos uma aplicação AngularJS constituído por:
- Ver, que é o HTML.
- Modelo, que são os dados disponíveis para a visão atual.
- Controlador, o que é a função JavaScript que faz / modificações / remove / controla os dados.
Em seguida, o escopo é o modelo.
O escopo é um objeto JavaScript com propriedades e métodos, que estão disponíveis tanto para a vista eo controlador.
Exemplo
Se você fizer alterações na visão, o modelo eo controlador será atualizado:
<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> Tente você mesmo " Know Your Âmbito
É importante saber qual âmbito você está lidando com, a qualquer momento.
Nos dois exemplos acima, existe apenas um espaço, por isso, conhecer o seu âmbito de aplicação não é um problema, mas para aplicações maiores, pode haver seções no DOM HTML que só pode acessar certos âmbitos.
Exemplo
Ao lidar com o ng-repeat directiva, cada repetição tem acesso ao objeto a 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>
Tente você mesmo " Cada <li> elemento tem acesso ao objecto de repetição de corrente, neste caso uma corda, que é referida usando x .
Âmbito Root
Todas as aplicações têm um $rootScope que é o escopo criado no elemento HTML que contém o ng-app directiva.
O rootScope está disponível em todo o aplicativo.
Se uma variável tem o mesmo nome, tanto no escopo atual e na rootScope, o aplicativo usa um no escopo atual.
Exemplo
A variável chamada "cor" existe no âmbito tanto do auditor e na 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> Tente você mesmo "