AngularJS访问cookie的方式是什么?我看到了对cookie的服务和模块的引用，但没有示例。
有没有AngularJS的规范方法?
当前回答
This answer has been updated to reflect latest stable angularjs version. One important note is that $cookieStore is a thin wrapper surrounding $cookies. They are pretty much the same in that they only work with session cookies. Although, this answers the original question, there are other solutions you may wish to consider such as using localstorage, or jquery.cookie plugin (which would give you more fine-grained control and do serverside cookies. Of course doing so in angularjs means you probably would want to wrap them in a service and use $scope.apply to notify angular of changes to models (in some cases).
另一个注意事项是，在提取数据时，两者之间有轻微的区别，这取决于您是使用$cookie存储值还是使用$cookieStore。当然，你真的想要使用其中一个。
除了添加对js文件的引用，你还需要将ngCookies注入到你的应用定义中，例如:
angular.module('myApp', ['ngCookies']);
然后你就可以出发了。
下面是一个函数最小化的例子，其中我展示了cookie estore是一个围绕cookie的薄包装器:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">
<h3>Cookies</h3>
<pre>{{usingCookies|json}}</pre>
<h3>Cookie Store</h3>
<pre>{{usingCookieStore|json}}</pre>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script>
angular.module('myApp', ['ngCookies']);
app.controller('MyController',['$scope','$cookies','$cookieStore',
function($scope,$cookies,$cookieStore) {
var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};
$cookies.dotobject = someSessionObj;
$scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };
$cookieStore.put('obj', someSessionObj);
$scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
}
</script>
</body>
</html>
步骤如下:
包括angular.js 包括angular-cookies.js 注入ngCookies到你的app模块中(并确保你在ng-app属性中引用了该模块) 添加一个$cookies或$cookieStore参数到控制器 使用点(.)操作符将cookie作为成员变量访问 ——或—— 使用put/get方法访问cookestore
其他回答
cookieStore美元http://docs.angularjs.org/api/ngCookies。
确保包含http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js来使用它。
添加angular cookie lib: angular-cookies.js
您可以对相应的控制器使用$cookies或$cookieStore参数
主控制器添加这个注入'ngCookies'
angular.module("myApp", ['ngCookies']);
在你的控制器中像这样使用cookie:
app.controller('checkoutCtrl', function ($scope, $rootScope, $http, $state, $cookies) {
//store cookies
$cookies.putObject('final_total_price', $rootScope.fn_pro_per);
//Get cookies
$cookies.getObject('final_total_price'); }
下面是一个使用$cookies的简单示例。单击按钮后，cookie将被保存，重新加载页面后，cookie将被恢复。
app.html:
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="appController as vm">
<input type="text" ng-model="vm.food" placeholder="Enter food" />
<p>My favorite food is {{vm.food}}.</p>
<p>Open new window, then press Back button.</p>
<button ng-click="vm.openUrl()">Open</button>
</body>
</html>
app.js:
(function () {
"use strict";
angular.module('app', ['ngCookies'])
.controller('appController', ['$cookies', '$window', function ($cookies, $window) {
var vm = this;
//get cookie
vm.food = $cookies.get('myFavorite');
vm.openUrl = function () {
//save cookie
$cookies.put('myFavorite', vm.food);
$window.open("http://www.google.com", "_self");
};
}]);
})();
This answer has been updated to reflect latest stable angularjs version. One important note is that $cookieStore is a thin wrapper surrounding $cookies. They are pretty much the same in that they only work with session cookies. Although, this answers the original question, there are other solutions you may wish to consider such as using localstorage, or jquery.cookie plugin (which would give you more fine-grained control and do serverside cookies. Of course doing so in angularjs means you probably would want to wrap them in a service and use $scope.apply to notify angular of changes to models (in some cases).
另一个注意事项是，在提取数据时，两者之间有轻微的区别，这取决于您是使用$cookie存储值还是使用$cookieStore。当然，你真的想要使用其中一个。
除了添加对js文件的引用，你还需要将ngCookies注入到你的应用定义中，例如:
angular.module('myApp', ['ngCookies']);
然后你就可以出发了。
下面是一个函数最小化的例子，其中我展示了cookie estore是一个围绕cookie的薄包装器:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">
<h3>Cookies</h3>
<pre>{{usingCookies|json}}</pre>
<h3>Cookie Store</h3>
<pre>{{usingCookieStore|json}}</pre>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script>
angular.module('myApp', ['ngCookies']);
app.controller('MyController',['$scope','$cookies','$cookieStore',
function($scope,$cookies,$cookieStore) {
var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};
$cookies.dotobject = someSessionObj;
$scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };
$cookieStore.put('obj', someSessionObj);
$scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
}
</script>
</body>
</html>
步骤如下:
包括angular.js 包括angular-cookies.js 注入ngCookies到你的app模块中(并确保你在ng-app属性中引用了该模块) 添加一个$cookies或$cookieStore参数到控制器 使用点(.)操作符将cookie作为成员变量访问 ——或—— 使用put/get方法访问cookestore
供你参考，我用$cookieStore、两个控制器、$rootScope和AngularjS 1.0.6组合了一个JSFiddle。它在JSFifddle的http://jsfiddle.net/krimple/9dSb2/作为一个基地，如果你搞砸了这个…
它的要点是:
Javascript
var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('CookieCtrl', function ($scope, $rootScope, $cookieStore) {
$scope.bump = function () {
var lastVal = $cookieStore.get('lastValue');
if (!lastVal) {
$rootScope.lastVal = 1;
} else {
$rootScope.lastVal = lastVal + 1;
}
$cookieStore.put('lastValue', $rootScope.lastVal);
}
});
myApp.controller('ShowerCtrl', function () {
});
HTML
<div ng-app="myApp">
<div id="lastVal" ng-controller="ShowerCtrl">{{ lastVal }}</div>
<div id="button-holder" ng-controller="CookieCtrl">
<button ng-click="bump()">Bump!</button>
</div>
</div>
推荐文章
- 如何从控制器函数切换视图?
- 如何在AngularJS中访问cookie ?
- AngularJS模板中的三元运算符
- 在angularJS中& vs @和=的区别是什么
- 如何/何时使用ng-click调用路由?
- 在Angular JS中的控制器之间传递数据?
- 在ng-repeat结束时调用函数
- 我怎样才能获得承诺的价值?
- 我应该使用' this '还是' $scope ' ?
- Angular IE缓存$http的问题
- 删除数组的第一项(比如从堆栈中弹出)
- 从AngularJS的url中删除片段标识符(# symbol)
- AngularJS For循环与数字和范围
- 如何在AngularJS中进行分页?
- AngularJS $http和$resource
