Use rootScope variables in my html
AngularjsAngularjs Problem Overview
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?
Angularjs Solutions
Solution 1 - Angularjs
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>
Solution 2 - Angularjs
This should work:
<h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>
Solution 3 - Angularjs
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
Solution 4 - Angularjs
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 !
Solution 5 - Angularjs
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>