Best IT Recipes

Use rootScope variables in my html

Thus, we can easily use scope variables in our angular html as follows:

<!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>

Uses 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 this way?

+55
angularjs
Jul 29 '15 at 17:57
source share
4 answers

You do not need to specify $rootScope in html. You can use it the same way you use $scope variables

Just update

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

to

 <h1>Hello {{yourName}} you are in in {{zoneName}}!</h1>
+73
Jul 29 '15 at 17:59 on
source share

This should work:

 <h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>
+62
Jul 29 '15 at 18:01
source share

you can enter $rootScope in your controller and then map it to a scope variable like this

$scope.global = $rootScope;

then in your template you can use

<p>$rootscope value of name is {{ global.name }}.</p>

You should be careful not to uselessly embed a thing in $rootScope , as it is not considered the best practice for modulating your code.

+12
Jul 29 '15 at 18:02
source share

I know it's late, but a good explanation is needed!

Any view in Angular 1.x will be automatically and by default a new $ scope such $ scope will be expanded from what is called $ rootScope , so the local area $ will inherit everything that $ rootScope stores and will have its own version of this data.

So, if you have information at the $ rootScope level, you will have it by default, and your view can access it directly using regular interpolation.

This line of code will show how to do it!

 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 is 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 check out this Plunker that explains exactly that!

+6
Jul 31 '16 at 9:51
source share


More articles:


All Articles