javascriptangularjsangularjs-rootscope

How to call a rootscope fuction in html - Angular Js


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.


Solution

  • 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