Access angular $ cookies with non-angular code
I have a module test
that sets cookie isTesting
to 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 the $ cookie is not available as helper.js
it is not part of any angular module, so DI is not available. How do I access the value isTesting
?
I tried using window.isTesting
this instead, but it didn't persist when I refresh the page or navigate to other pages. So, cookie is the best choice.
source to share
You can use the Angular injector to access Angular modules and services outside of your Angular app.
AngularJS Code
angular.module('app', ['ngCookies']).
controller('ctrl', ['$cookies', function($cookies) {
$cookies.put('isTesting', true);
}]);
Not 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="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-cookies.js@1.4.3" 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
source to share
Have you tried jquery cookie?
bower/npm install --save jquery-cookie
$scope.refreshShownHidden = function() {
$scope.showTurnOffTest = $.cookie('isTesting')
$scope.showTurnOnTest = ! $.cookie('isTesting')
}
$scope.turnOnTest = function() {
$.cookie('isTesting', true)
//...
}
Then in your helper:
exports.havePermission = function(access, resource, userService, entity) {
if ($.cookie('isTesting'))
return true
//...
}
In this case, I don't recommend using angular as your helper is not an angular app.
source to share
This is not the purpose of AngularJS. You should try to keep all your stuff in 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 the $ cookies anytime anywhere. It simplifies and simplifies some things (any other script can also access it, it can create a conflict, etc.)
source to share