Angular JS - set $cookies domain wide failed

Question

I've been having troubles with setting cookies in my angularjs app. The situation is I want to set a cookies that is available site-wide, but I have no idea how to set all the params for the cookies using angular js default $cookies object.

For example, normally in Javascript I would write this

var exp = new Date();
exp.setTime(exp.getTime()+(24*60*60*1000)); // expires after a day
document.cookie = "myCookies=yes;expires="+exp.toGMTString()+ ";domain=.example.com;path=/";

But as DOM object can't be loaded into my app easily, so I have to use $cookies (angular-cookies.js). The new code is:

angular.module('MyApp')
    .controller('MyCtrl', function ($scope, $filter, Slug,PUBLIC_ROUTES, $cookies) {
        var myCookies = $cookies['mycookies'];
        if (typeof myCookies == 'undefined' || typeof myCookies == undefined) {
            $cookies['mycookies'] = "yes";
        }
    });

But there's no way I can set the expiry date, path and domain as those are not available for $cookies.

What should I do?

Answer 1

If you're using angular 1.4+ just set $cookiesProvider.defaults on the config section of your main app module. Example:

angular.module('my-app', [ngCookies])
.config(['$cookiesProvider', function($cookiesProvider) {
    // Set $cookies defaults
    $cookiesProvider.defaults.path = '/';
    $cookiesProvider.defaults.secure = true;
    $cookiesProvider.defaults.expires = exp_date;
    $cookiesProvider.defaults.domain = my_domain;
}]);

Just don't make the same mistake I did at first assigning defaults with a new object like this:

$cookiesProvider.defaults = {path: '/', secure: true};

This would break the object's reference and the defaults wouldn't be overriden anymore.

Answer 2

$cookies allows you to put(key, value, [options]) with options from $cookiesProvider including expires attribute.

You may also take a look at How to set expiration date for cookie in AngularJS