AngularJs

Question

在我的 app.run 中，我调用 MenuSvc 来填充 $state，然后我调用 LayoutCtrl 来填充 DOM 的导航，大概是使用缓存并避免再次调用服务器。

1. $http:

/* @ngInject */
app.factory('MenuSvc', MenuSvc);
function MenuSvc($http, MenuSvcCache){
    return {
        all: function(){
            return $http({
                method: 'GET',
                url: 'api/menu.json',
                cache: MenuSvcCache
            });
        }
    }
};
MenuSvc.$inject = ['$http', 'MenuSvcCache'];

2。 $缓存工厂:

/* @ngInject */
app.factory('MenuSvcCache', MenuSvcCache);
function MenuSvcCache($cacheFactory){
    return $cacheFactory('MenuSvc')
};
MenuSvcCache.$inject = ['$cacheFactory'];

3。布局Ctrl:

ng.module('app.Layout').controller('LayoutCtrl', LayoutCtrl);
function LayoutCtrl($cacheFactory, $http, MenuSvc, MenuSvcCache) {
    var layout = this;
    layout.pageTitle = 'LayoutCtrl';

    Init();
    function Init(){
        if (MenuSvcCache) {
            layout.menuItems = MenuSvcCache.get();
            console.log(MenuSvcCache);
        } else {
            MenuSvc.all().success(function (data) {
                layout.menuItems = data;
                console.log(MenuSvcCache);
            })
                .error(function (error) {
                    console.log('Error: ' + error.message)
                });
        }
    }
};

LayoutCtrl.$inject = ['$cacheFactory', '$http', 'MenuSvc', 'MenuSvcCache'];

不用说了，不行。有人看到我的错误了吗？

Answer 1

我决定从 app.run 调用 put 并且它在那里工作（上面的 MenuSvcCache 保持不变）：

1. app.run

    app.run(function ($q, $rootScope, $state, $window, MenuSvc, MenuSvcCache) {
    MenuSvc.all().success(function (states) {
        MenuSvcCache.put('MenuSvc', states)
     ..........

2。 MenuSvc

    same as above but removed the 'cache: true'

3。布局Ctrl

        function Init(){
        if (MenuSvcCache) {
            layout.menuItems = MenuSvcCache.get('MenuSvc');
            console.log(MenuSvcCache);
        } else {
            MenuSvc.all().success(function (data) {
                layout.menuItems = data;
                MenuSvcCache.put('MenuSvc', data)
                console.log(MenuSvcCache);
            })
                .error(function (error) {
                    console.log('Error: ' + error.message)
                });
        }
    }
};

额外奖励，如果你想使用刷新按钮：

        layout.clearCache = function () {
        if (MenuSvcCache) {
            MenuSvcCache.removeAll();
        }
    }

AngularJs - 如何将 $cacheFactory 与 $http 一起使用

AngularJs - How to use $cacheFactory with $http

caching