How to call a rootscope fuction in html - Angular Js

Question

i have made a rootscope function in which I am actually logging out the user. But I dont know how to call it in a view .

My functions is

    $rootScope.logout = function () {
            $cookies.remove('auth_token');
            $cookies.remove('role');
            $cookies.remove('status');
            $cookies.remove('id');
            $location.path('/signin');
//            window.alert("Logout Successfully");
            $rootScope.auth_token = $cookies.get('auth_token');
            $rootScope.role = $cookies.get('role');
            $rootScope.status = $cookies.get('status');
            $rootScope.id = $cookies.get('id');
            $rootScope.keyword_auth_token = 'Bearer ' + $rootScope.auth_token; //Need to store all of them 

            $rootScope.is_loggedin = false;
        };

My view is

<button ng-click="$root.logout()">Logout</button>

I have tried $root.logout(), $rootScope.logout() but its not working.

Matthew Cawley · Accepted Answer · 2017-02-08 09:53:18Z

4

It shoud just be available on the scope, since $scope inherits from $rootScope. Try:

<button ng-click="logout()">Logout</button>

UPDATE...

Since you are trying to access $rootScope from outside of any controller, where there is no child $scope that inherits from $rootScope then the logout function won't be automatically available via inheritance (as I had previously suggested).

You'll have to declare the $rootScope.logout function in the module's run block instead. For more information on this, read the Module Loading & Dependencies part of the angular docs.

JS:

var app = angular.module('myApp', []);

app.run(function($rootScope){
  $rootScope.logout = function () {
      // ...
  }
});

Now the logout function should be available to call like this:

HTML:

<button ng-click="logout()">Logout</button>

Sample Plunk - Accessing $rootScope where there is no child $scope

edited Feb 8, 2017 at 9:53

answered Feb 7, 2017 at 23:50

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Matthew Cawley Over a year ago

Where are you registering the $rootScope.logout function?

Usman Iqbal Over a year ago

in index file where there is no controller

Matthew Cawley Over a year ago

Ah I see, I've updated my answer, please let me know if that works.

J.J Over a year ago

I have similar issue as @UsmanIqbal, in my case i was calling the function inside an isolated scope... to get around the problem i used $root.logout() in my html

Dhara Vaghasiya Over a year ago

Thnx,,Your answer is saviour for me..@MatthewCawley

Roadhouse · Accepted Answer · 2017-02-08 00:58:32Z

1

<form ng-controller="Your controller name" ng-submit="logout()">
  <button type="submit">Logout</button>
</form>

Make sure you're using the right controller so it's in scope, use ng-submit to pass the function. Make sure your button is set to type "submit".

answered Feb 8, 2017 at 0:58

Roadhouse

416 bronze badges

Collectives™ on Stack Overflow

How to call a rootscope fuction in html - Angular Js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related