Scope is an object which is used to access the properties and methods defined in a controller. Every application has single root scope.
Though the difference between scope and root scope the availability of the property assigned with the object. A property assigned with $scope cannot be used outside the controller in which it is defined whereas the a property assigned with $root Scope can be used anywhere in any controller.
example:
<!doctype html>
<html ng-app="myApp">
<head>
<title>
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body >
<div ng-controller="Ctrl1" style="border:2px solid blue; padding:5px">
Root scope color: {{rootscopecolor}} <br/>
<br/>
Red color controller: {{redcolor}} <br/>
<br />
Green Color controller: {{greencolor}} <br/>
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid blue; padding:5px">
Root scope color: {{rootscopecolor}} <br/>
<br/>
Red color controller: {{redcolor}} <br/>
<br />
Green Color controller: {{greencolor}} <br/>
</div>
<br />
<!-- <script src="lib/angular.js"></script> -->
<!-- // var app = angular.module('myApp', []);
// app.controller('Ctrl1', function ($scope, $rootScope) {
// $scope.msg = 'World';
// $rootScope.name = 'AngularJS';
// });
// app.controller('Ctrl2', function ($scope, $rootScope) {
// $scope.msg = 'Dot Net Tricks';
// $scope.myName = $rootScope.name;
// }); -->
</body>
</html>
script.js:
var app = angular.module('myApp', []);
app.controller('Ctrl1', function ($scope, $rootScope) {
$rootScope.rootscopecolor = 'i am root scope color';
$scope.redcolor = ' i am red color';
});
app.controller('Ctrl2', function ($scope) {
$scope.greencolor = 'i am green color';
// <!-- $scope.myName = $rootScope.name; -->
});
0 Comment(s)