AngularJS - Scopes
Scope è uno speciale oggetto JavaScript che collega il controller con le viste. L'ambito contiene i dati del modello. Nei controller, si accede ai dati del modello tramite l'oggetto $ scope.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
I seguenti punti importanti sono considerati nell'esempio precedente:
$ Scope viene passato come primo argomento al controller durante la sua definizione del costruttore.
$ Scope.message e $ scope.type sono i modelli utilizzati nella pagina HTML.
Assegniamo valori ai modelli che si riflettono nel modulo dell'applicazione, il cui controller è shapeController.
Possiamo definire funzioni in $ scope.
Ereditarietà dell'ambito
L'ambito è specifico del controller. Se definiamo controller nidificati, il controller figlio eredita l'ambito del controller padre.
<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>
I seguenti punti importanti sono considerati nell'esempio precedente:
Assegniamo valori ai modelli in shapeController.
Sostituiamo il messaggio nel controller figlio denominato circleController . Quando il messaggio viene utilizzato all'interno del modulo del controller denominato circleController , viene utilizzato il messaggio sovrascritto.
Esempio
Il seguente esempio mostra l'utilizzo di tutte le direttive sopra menzionate.
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>
Produzione
Apri il file testAngularJS.htm in un browser web e guarda il risultato.