Use rootScope variables in my html

Question

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?

from every $scope you can access to the root scope using `$scope.$root` as this answer states -> https://stackoverflow.com/a/62533886/903998 — Victor, May 06 '22 at 21:15

Nikhil Aggarwal · Answer 1 · 2015-07-29T18:00:17.300

93

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>

edited Jul 29 '15 at 18:00

answered Jul 29 '15 at 17:59

Nikhil Aggarwal

28,197
4
43
59

2

Thank you nikhil I didnt know that! Will test out right away! :) Does the same apply to if I wanted to inline variables from `$route.current.params` ? – yatg Jul 29 '15 at 17:59
Im trying but i have some error somewhere which is disabling the app Im trying to find haha – yatg Jul 29 '15 at 18:04
2

Thanks so much nikhil! – yatg Jul 29 '15 at 18:07
2

Oh forgot the scope inheritance, that's even better – zeachco Jul 29 '15 at 18:22
2

Great answer. Works perfect. – BenRoe Apr 25 '16 at 18:31
1

If this answers your question, the best way to thank @nikhil is by accepting it as an answer to reward his efforts. – Dennis Wanyonyi Sep 05 '16 at 08:39
That won't work in isolated scopes of directives. You need to use $root.yourVariable – IsraGab Sep 26 '17 at 09:24
@IsraGab - Agreed. However, the OP was stuck with a simplistic scenario and hence, a simplistic answer. – Nikhil Aggarwal Sep 26 '17 at 10:34
It didn't work for me. I needed to use {{$root.zoneName}} instead. You know why? – Jeff Pal Oct 01 '19 at 13:12
@JeffPal - Were you trying to use this in directive template? – Nikhil Aggarwal Oct 01 '19 at 14:52

score 87 · Answer 2 · answered Jul 29 '15 at 18:01

87

This should work:

<h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>

answered Jul 29 '15 at 18:01

GPicazo

6,516
3
21
24

Thank you Gpicazo! woudl same work for `{{$route.current.params}}`? – yatg Jul 29 '15 at 18:02
2

@yatg I don't believe so. You can however, (1) inject $stateParams into the controller (2) set a scope variable like $scope.param = $stateParams.param; and (3) bind the scope variable in the view: {{param}}. – GPicazo Jul 29 '15 at 18:06
see http://stackoverflow.com/questions/22216441/what-is-the-difference-between-scope-root-and-rootscope for explanation – Muhammad Hewedy Jan 25 '17 at 14:44
3

This was the only solution that worked for me. Was not able to access the variable suffix from the DOM without `$root`. – mjoyce91 May 09 '17 at 17:14
@mjoyce91 - I'm glad it helped :) – GPicazo May 09 '17 at 17:48

score 12 · Answer 3 · answered Jul 29 '15 at 18:02

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

score 12 · Answer 4 · answered Jul 31 '16 at 09:51

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="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
 <script data-require="ui-router@1.0.0-alpha.5" 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 !

score 3 · Answer 5 · answered Jun 23 '20 at 11:42

3

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>

answered Jun 23 '20 at 11:42

Yuvraj Patil

7,944
5
56
56

Use rootScope variables in my html

5 Answers5

Linked