Scope

  • Scope is the binding part between the HTML (UI) and the Javascript (the Controller).
  • Scope object contains the available properties and methods.
  • Scope is accessible in both HTML and Javascript.

Scope Example


<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{ name }}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.name = "Coderz Heaven";
});
</script> 

Root Scope

  • Root Scope is created on the HTML element that contains the ng-app directive
  • Root Scope is available for the entire application
  • If a variable is available in both rootScope and scope, then the application uses one in the current scope

Root Scope Example


<body ng-app="myApp">

<p>The rootScope's name :</p>
<h1>{{ name }}</h1>

<div ng-controller="myCtrl">
    <p>Name is : {{ name }}</p>
</div>

<p>The rootScope name is still {{ name }}</p>

<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
    $rootScope.name = 'Coderz';
});
app.controller('myCtrl', function($scope) {
    $scope.name = "Heaven";
});
</script>
</body> 

So for the above example the final value for variable “name” is “Heaven” since it is in the current scope.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.