AngularJS Scopes

AngularJS Scopes

AngularJS scope is a special kind of JavaScript object which provide the role of joining controller with the views. It contains the model data. In controllers, model data are accessed via $scope object.

AngularJS Scopes

Example

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

We can also define function as well in the $scope. Some points are important to be considered in the above example.

  • $scope.message and $scope.type are the models which are used in the HTML (Hyper Text Markup Language) page.
  • We have set values to models which will be reflected in the application module whose controller is the shapeController.
  • $scope is passed as the first argument to the controller during its constructor definition.

Sidebar Scope Creation

When your any application starts, AngularJS creates the basic scope, and is also known as $rootScope. Sidebar then compiles the document, starting at the root element. If it traverses the DOM, it encounters and processes builders that it known directives and other directives such as ng-controller and request new scopes. After all processing, compilation is done an AngularJS will have defined a scope tree that mirrors the DOM tree.  The $rootScope is bound to the root part and child scopes are bound the DOM nodes that request then are discovered. Individual scopes are incredibly very helpful. Generally, child scopes can access properties of their parent, example:

app.controller('OuterController', function($scope) {
  $scope.outer = 'From the outside';
});
 
app.controller('InnerController', function($scope) {
  $scope.inner = 'looking in.';
});

The Scope is controller specific. When we declare nested controllers then child controller will be inherited the scope of its parent child controller.

Scope Inheritance

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

This example provides set values to models in shapeController. We have also overridden message in child controller circleController. When any message is used within the module of controller circleController, the overridden message will be used.In this example are some points important to be considered.

Example:

<html>
<head>
   <title>Angular JS Forms</title>
</head>
<body>
   <h2>The First 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="http://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 the square shape controller";
         $scope.type = "Square";
      });
 
   </script>
</body>
</html>

Isolating Scopes

The AngularJS default scope inheritance model can be understood and very helpful to divide up parts of a big application, however sometimes it causes problems. AngularJS also provides an escape hatch from inheritance isolated scopes.

Isolating Scopes Angularjs

These all scopes are very special and identical to normal ones, however they don’t prototypical inherit. Isolated scopes can only be used in the directives, so we can create a simple example:

app.directive('isolated', function() {
  return {
    scope: {},
    template: '<input ng-model="message.content"><span>{{message.content}}</span>'
  };
});
<div ng-controller="EditController">
  <input ng-model="message.content">
  <span>{{message.content}}</span>
  <div isolated></div>
</div>

ng-switch

The ng-switch scope inheritance works just such as ng-include. If you want two-way data binding to a primitive in the parent scope, it uses $parent or modify the model to be an object and then bind to a property of that object. This will ignore child scope, hiding or shadowing of parent scope properties.

Scope as Data-Model

The scope is the glue between application controller and the result. Time of the template, adding phase the directives set up $watch expressions on the scope. It provides the directives to be notified of completely modify, which is also provide to render the recent value to the DOM.