All geek questions in one place

AngularJs: How to access global variables outside the controller?

I am trying to access a global variable through a regular function, is this possible?

I installed some var using $ rootScope and I am trying to access it through a callback function. This callback is called from the controller. I do not want to pass $rootScope to this callback.

Is there any way to access this $rootScope.var ?

I am open to using the service, if possible.

Please offer.

thanks

I am trying to access rootScope as follows:

  function fbLandingCtrl($scope, $rootScope) { $rootScope.isFBLoggedin = false; $scope.login = function() { console.log( $rootScope.isFBLoggedin); fbHelper.login(getUserInfo); }; function getUserInfo(){ fbHelper.getUserInfo(updateStatus); } function updateStatus(userInfo){ $rootScope.isFBLoggedin = true; console.log( $rootScope.isFBLoggedin); } }

and my service:

  myapp.factory('FBService', [ '$rootScope', function ($rootScope) { $rootScope.isFBLoggedin = false; // global variable $rootScope.userName = null; $rootScope.userEmail = null; return { getStatus: function() { return $rootScope.isFBLoggedin; }, setStatus: function(status) { console.log("Status:"+status); return $rootScope.isFBLoggedin = status; } }; }]);

it shows isFBLoggedin as true with updateStatus fn, but does not reflect it in the view

I type {{isFBLoggedin}} , but ts shows false

Finally, it works.

I followed @dluz's solution.

I also used $rootScope.$apply(function() {}}) to render views

+6
source share
2 answers

Please do not use $ rootScope to define any function - this is really bad practice. Remember that $ rootScope is a global variable.

You can get $ rootScope through a service, for example:

 <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('myAppCtrl', ['$scope', 'myService', function ($scope, myService) { console.log(myService.getData()); }]) myApp.factory('myService', [ '$rootScope', function ($rootScope) { return { getData: function() { return $rootScope; } }; }]) </script> </head> <body ng-controller="myAppCtrl"> </body> </html>

$ rootScope exists, but it can be used for evil

The regions in Angular form a hierarchy prototypically inheriting from the root region at the top of the tree. This can usually be ignored, since most views have a controller and therefore scope.

Sometimes there are pieces of data that you want to make global for the entire application. To do this, you can enter $ rootScope and set values ​​on it, as in any other area. Because areas inherited from the root area, these values ​​will be available to expressions attached to directives such as ng-show, just like the values ​​in the local $ scope.

Of course, the global state sucks, and you should use $ rootScope sparingly, just as you (hopefully) use with global variables in any language. In particular, do not use it for code, but only data. If you are tempted to put a function on $ rootScope, it is almost always better to place it in a service that can be inserted where you need it and more easily tested.

Conversely, do not create a service whose sole purpose is to store and return data bits.

UPDATED RESPONSE

A_J, I'm not sure what your application script is. I will need to see more code to give you a better answer, but please take a look at the code below. Perhaps this may give you an idea of ​​how you can create your own code to access $rootScope inside the service .

Click the "Login" button and take a look at the console. Working example here ( http://jsbin.com/olOyaHa/1/ )

  <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('fbLandingCtrl', ['$scope', '$rootScope', 'loginService', function ($scope, $rootScope, loginService) { $rootScope.isFBLoggedin = false; $scope.login = function() { console.log('Current login status', $rootScope.isFBLoggedin); console.log(loginService.getUserInfo()); loginService.login(loginService.getUserInfo()); loginService.updateStatus(); }; }]); myApp.factory('loginService', [ '$rootScope', function ($rootScope) { return { login: function() { console.log('now I am logged in!'); return $rootScope.isFBLoggedin = true; }, getUserInfo: function() { return { username: 'xmen', role: 'admin', logged: 'false' }; }, updateStatus: function(userInfo){ $rootScope.isFBLoggedin = true; console.log('Current login status', $rootScope.isFBLoggedin); } }; }]) </script> </head> <body ng-controller="fbLandingCtrl"> <button ng-click="login()">Log Me In</button> </body> </html>
+5
source

You can access $ rootScope.var inside your controller if you added $ rootScope as a reference to the controller:

 function MyCtrl($scope, $rootScope, $routeParams /*, ... */) { /* Controller code and callback code here */ }

It will work as long as your callback is defined inside your controller.

EDIT: after our discussion, here's how to define a function inside your rootScope:

 yourApp.run($rootScope/*, ResourceProvider ... */) { $rootScope.yourFunction= function () { /* The code of you functions */ } }
+2
source

Source: https://habr.com/ru/post/955105/

More articles:


All Articles