English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di base AngularJS

AngularJS Scope(作用域)

Lo scope è un oggetto JavaScript speciale utilizzato per connettere il controller con la vista. Lo scope contiene i dati del modello. Nei controller, i dati del modello possono essere acceduti tramite l'oggetto $scope.

<script>
　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　
　　　mainApp.controller("shapeController",　function($scope)　{
　　　　　　$scope.message = "In shape controller";
　　　　　　$scope.type　=　"Shape";
　　　});
</script>

Punti chiave considerati nell'esempio precedente-

  • $scope viene passato come primo argomento al costruttore del controller durante la definizione del costruttore.

  • $scope.message e $scope.type sono modelli utilizzati nella pagina HTML.

  • Assegniamo valori al modello rappresentato dal modulo dell'applicazione, il cui controller è shapeController.

  • Possiamo definire funzioni in $scope.

Ereditarietà dello scope

Il scope (scope) è specifico del controller. Se definiamo controller annidati, i sotto-controller erediteranno lo scope 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>

Punti chiave considerati nell'esempio precedente-

  • stiamo assegnando valori al modello in shapeController.

  • stiamo utilizzandocircleControlleril messaggio viene sovrascritto nel sotto-controller chiamatocircleControllernel modulo del controllerquando messageutilizzerà il messaggio sovrascritto.

Esempio online

Il seguente esempio mostra l'uso di tutte le istruzioni menzionate sopra.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Forms Angular JS</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS Scope (Scope di AngularJS)</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://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.controller("shapeController",　function($scope)　{
　　　　　　　　　　　　$scope.message　=　"形状控制器";
　　　　　　　　　　　　$scope.type　=　"Shape";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("circleController",　function($scope)　{
　　　　　　　　　　　　$scope.message　=　"圆圈控制器";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("squareController",　function($scope)　{
　　　　　　　　　　　　$scope.message　=　"方形控制器";
　　　　　　　　　　　　$scope.type　=　"Square";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
测试看看‹/›

输出结果

在网络浏览器中打开文件testAngularJS.htm并查看结果。

AngularJS 服务(Service) AngularJS 视图