access angular $cookies from non-angular code

Question

I have a test module that set cookie isTesting to be true

app.controller('test_page',
    ['$scope', '$window', 'userService', 'flash', '$cookies',
function($scope, $window, userService, flash, $cookies) {
    helper.initCommonScope($scope, $window, userService, flash)

    $scope.refreshShownHidden = function() {
        $scope.showTurnOffTest = $cookies.get('isTesting')
        $scope.showTurnOnTest = ! $cookies.get('isTesting')
    }

    $scope.turnOnTest = function() {

        $cookies.put('isTesting', true)
        $scope.refreshShownHidden()
        helper.turnOnTest()
    }
    $scope.turnOffTest = function() {
        $cookies.put('isTesting', false)
        $scope.refreshShownHidden()
        helper.turnOffTest()
    }

    $scope.refreshShownHidden()

}])

And in helper.js, I have

exports.havePermission = function(access, resource, userService, entity) {
    //Note: In debugging, we can grant client helper all access, and test robustness of server
    if (angular.$cookies.isTesting)
        return true
    return permission.havePermission(access, resource, userService.isAuthenticated(), entity, userService.user)
}

But $cookies is not available since helper.js is not part of any angular module, thus no DI is available. How can I access the isTesting value?

I have tried using window.isTesting instead but it's not persisted when I refresh the page or go to other pages. So cookie is a better choice

Pass $cookies, or the cookie itself, as argument? Make helper an angular service, so that you can inject $cookies inside? — JB Nizet
– JB Nizet, Commented Jul 18, 2015 at 11:41
I use helper all over the places. I dont think I can modify all the controllers to pass $cookies. any other ways? — OMGPOP
– OMGPOP, Commented Jul 18, 2015 at 11:46
Also, some initialialization code which is outside a function requires the cookie — OMGPOP
– OMGPOP, Commented Jul 18, 2015 at 11:46

Vadim · Accepted Answer · 2015-07-18 12:11:50Z

You can use Angular's injector to access Angular modules and services outside of your Angular application.

AngularJS Code

angular.module('app', ['ngCookies']).
  controller('ctrl', ['$cookies', function($cookies) {
    $cookies.put('isTesting', true);
  }]);

Non-Angular Code

helper = {
  getCookies: function() {
    // Create new injector for ngCookies module
    var $injector = angular.injector(['ngCookies']);

    // Inject $cookies to some function and invoke it
    $injector.invoke(['$cookies', function($cookies) {
      alert($cookies.get('isTesting'));
    }]);
  }
}

HTML

<html ng-app='app'>

  <head>
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-cookies.js"></script>
    <script src="script.js"></script>
    <script src="helper.js"></script>
  </head>

  <body ng-controller="ctrl">
    <button onclick="helper.getCookies()">Click Me</button>
  </body>

</html>

Plunker: http://plnkr.co/edit/jur9A6d69ViiJqiFgopD?p=preview

Estus Flask · Accepted Answer · 2015-07-18 12:08:19Z

2

var cookies = angular.injector(['ngCookies']).get('$cookies');

It creates a new instance of $cookies service, so if you're using it across the app, it is better to export it to global.

answered Jul 18, 2015 at 12:08

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Comments

KyleK · Accepted Answer · 2015-07-18 11:47:01Z

0

It's not the AngularJS purpose. You should try to keep all your stuff in your AngularJS code. However you can set any global variable in AngularJS:

app.controller('test_page',
    ['$scope', '$window', 'userService', 'flash', '$cookies',
function($scope, $window, userService, flash, $cookies) {
    angular.$cookies = $cookies;
    // or window.$cookies = $cookies;
    helper.initCommonScope($scope, $window, userService, flash)

Then you can access $cookies anytime anywhere. It make certain things easier but less safe (any other script can access it too, it can create conflict, etc.)

answered Jul 18, 2015 at 11:47

KyleK

5,16920 silver badges35 bronze badges

6 Comments

OMGPOP Over a year ago

is angular under window?

OMGPOP Over a year ago

if i dont assign it to angular, where can I find the cookie?

KyleK Over a year ago

Yep, else, you could not write angular.module(...)

KyleK Over a year ago

If you do not call the controller every time, call it in .run / .config / .directive / .service / .factory

OMGPOP Over a year ago

i dont like to pollute the globals. Any place to find $scope (it's original place)? or anyway to wrap document.cookie?

|

Collectives™ on Stack Overflow

access angular $cookies from non-angular code

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related