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-08T09:53:18.373

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 08 '17 at 09:53

answered Feb 07 '17 at 23:50

Matthew Cawley

2,688
1
8
19

Where are you registering the `$rootScope.logout` function? – Matthew Cawley Feb 08 '17 at 00:07
in index file where there is no controller – Usman Iqbal Feb 08 '17 at 05:34
Ah I see, I've updated my answer, please let me know if that works. – Matthew Cawley Feb 08 '17 at 08:30
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 – J.J Dec 05 '17 at 15:34
1

Thnx,,Your answer is saviour for me..@MatthewCawley – Dhara Vaghasiya Apr 13 '19 at 08:05

score 1 · Answer 2 · answered Feb 08 '17 at 00:58

<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".

How to call a rootscope fuction in html - Angular Js

2 Answers2