AngularJS - Scopes
Scope é um objeto JavaScript especial que conecta o controlador às visualizações. O escopo contém dados do modelo. Nos controladores, os dados do modelo são acessados por meio do objeto $ scope.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
Os seguintes pontos importantes são considerados no exemplo acima -
O $ scope é passado como primeiro argumento para o controlador durante sua definição de construtor.
O $ scope.message e $ scope.type são os modelos que são usados na página HTML.
Atribuímos valores aos modelos que são refletidos no módulo do aplicativo, cujo controlador é o shapeController.
Podemos definir funções em $ scope.
Herança de escopo
O escopo é específico do controlador. Se definirmos controladores aninhados, o controlador filho herda o escopo de seu controlador pai.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
Os seguintes pontos importantes são considerados no exemplo acima -
Atribuímos valores aos modelos em shapeController.
Substituímos a mensagem no controlador filho denominado circleController . Quando a mensagem é usada dentro do módulo do controlador denominado circleController , a mensagem substituída é usada.
Exemplo
O exemplo a seguir mostra o uso de todas as diretivas mencionadas acima.
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
Resultado
Abra o arquivo testAngularJS.htm em um navegador da web e veja o resultado.