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

AngularJS Basic Tutorial

AngularJS Scope (Scope)

The scope is a special JavaScript object used to connect the controller with the view. The scope contains model data. In the controller, model data is accessed through the $scope object.

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

The following points were considered in the above example-

  • The $scope is passed as the first parameter to the controller during the construction of the definition.

  • $scope.message and $scope.type are models used in the HTML page.

  • We assign values to the model reflected in the application module, whose controller is shapeController.

  • We can define functions in $scope.

Scope Inheritance

The scope (scope) is specific to the controller. If we define nested controllers, the child controllers will inherit the scope of their parent controllers.

<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>

The following points were considered in the above example-

  • shapeController.

  • We assign values to the model incircleControllersubcontroller overrides the message. When in the namedcircleControllerin the controller modulewhen message is, it will use the overridden message.

Online Examples

The following examples demonstrate the use of all the above directives.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2> AngularJS Scope (Scope) </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 = "Shape Controller";
　　　　　　　　　　　　$scope.type = "Shape";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("circleController", function($scope) {
　　　　　　　　　　　　$scope.message = "Circle Controller";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("squareController", function($scope) {
　　　　　　　　　　　　$scope.message = "Square Controller";
　　　　　　　　　　　　$scope.type = "Square";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Test and see‹/›

Output Results

Open the file in a web browsertestAngularJS.htmand view the results.

AngularJS Services (Service) AngularJS Views