Menu
So we can use scope variables in our angular html easily like this:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
So for example:
<h1>Hello {{yourName}}!</h1>
Is using yourName from the scope I was hoping to do:
<h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1>
Is it possible to bring $rootScope variables in like this?
763
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.
The main difference is 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 a property assigned with $rootScope can be used anywhere.
An app can have only one $rootScope which will be shared among all the components of an app.
You do not need to specify $rootScope in html. You can use it the same way as you use $scope variables
Just update from
<h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1>
to
<h1>Hello {{yourName}} you are in in {{zoneName}}!</h1>
This should work:
<h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>
you could inject $rootScope in you controller and then map it to a scope variable like this
$scope.global = $rootScope;
then in your template you could use
<p>$rootscope value of name is {{ global.name }}.</p>
You have to be careful to not uselessly put thing into the $rootScope as it's not considered the best practice to modulate your code
43
I know this is late, But a good explanation is needed !
Any View in Angular 1.x world will have automatically and by default a new $scopesuch $scope will be extended from something called the $rootScope so the local $scope will inherit everything that the $rootScope is storing and will have it's own version of the that data.
So if you have any information in the $rootScope level you will have it by default and so your view can access it directly using usual interpolation.
This line of code will show the how too !
var app = angular.module('plunker', []);
app.run(function($rootScope) {
$rootScope.persons = [
{
name : "Houssem",
role : "Developer Advocate"
},
{
name: "Clark",
role: "Developer"
}
];
})
app.controller('MainCtrl', function($scope) {
$scope.greetings = 'Hello World !';
});
And this on the Index page :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
<script data-require="[email protected]" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{greetings}}</p>
<ul>
<li ng-repeat="person in persons">
<p>{{person.name}} - {{person.role}}</p>
</li>
</ul>
</body>
</html>
And please check This Plunker which explain just that !
38
In my case it was not working with using rootscope variables directly. I had to use it with $root.
my code looks like below:
<h1>you are in in {{$root.zoneName}}!</h1>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
