Question

我一直在尝试使用ngCookie在我的应用中存储和检索Cookie。由于我无法设置使用ngCookie创建的cookie的路径或过期，因此我不得不寻找其他地方。

所以我试图使用这个jQuery cookie plugin。

但是，我无法弄清楚如何在角度服务中提供它。关于如何在控制器和服务中使用jQuery插件的问题，答案一致指向使用指令，但我不认为在这种情况下这是正确的方法，因为cookie是控制器和服务应该知道的东西。

那么，有人会如何为Angular服务提供jQuery插件？

Answer 1

您可以在工厂中封装jquery cookie API，以便公开一些类似的方法：

angular.module('MyApp', []);

angular.module('MyApp').factory('CookieFactory', function(){

    return {
        getCookie: function(name){
            return $.cookie(name);
        },

        getAllCookies: function(){
            return $.cookie();
        },

        setCookie: function(name, value){
            return $.cookie(name, value);
        },

        deleteCookie: function(name){
            return $.removeCookie(name);
        }
    }
});

但我们可以想象一下，当你获得cookie值时，你想做点什么。通过AngularJS的API承诺回调怎么办？

所以我们的工厂变成了：

angular.module('MyApp', []);

angular.module('MyApp').factory('CookieFactory', function($q, $timeout){

    return {
        getCookie: function(name){
           var deferred = $q.defer();

           $timeout(function() {
               deferred.resolve($.cookie(name));
           }, 0);

           return deferred.promise;
        },

        getAllCookies: function(){
            return $.cookie();
        },

        setCookie: function(name, value){
            return $.cookie(name, value);
        },

        deleteCookie: function(name){
            return $.removeCookie(name);
        }
    }
});

然后你可以在你的控制器中使用它：

angular.module('MyApp').controller('CookieCtrl', function(CookieFactory) {

    CookieFactory.getCookie('mycookie').then(function(value){
      //do that you want
    });

});

在这里工作：http://plnkr.co/edit/6KoUtp?p=preview

Answer 2

我认为这是一个你想要使用服务而不是指令的实例。通常，当您处理修改DOM元素的jQuery插件时，将使用指令。

它看起来像这样。

angular.module('app', []).service('myCookieService', function(){
    return {
        cookie: $.cookie,
        removeCookie: $.removeCookie
    }
});

当然，话说回来，你可以从app中的任何地方调用jQuery插件。

如何在Angular服务中使用jQuery.cookie插件

2 个答案: