在AngularJS中的控制器之间共享数据

时间:2014-10-18 23:44:10

标签: javascript angularjs angular-resource angular-promise angular-services

我使用以下工厂从API获取数据并将其存储到名为apiData的本地变量。

app.factory('MyFactory', function($resource, $q) {

    var apiData = [];
    var service = {};

    var resource = $resource('http://example.com/api/sampledata/');

    service.getApiData=function() {
        var itemsDefer=$q.defer();
        if(apiData.length >0) {
            itemsDefer.resolve(apiData);
        }
        else
        {
            resource.query({},function(data) {
                apiData=data;
                itemsDefer.resolve(data)
            });
        }
        return itemsDefer.promise;
    };

    service.add=function(newItem){
        if(apiData.length > 0){
            apiData.push(newItem);
        }
    };

    service.remove=function(itemToRemove){
        if(apiData.length > 0){
            apiData.splice(apiData.indexOf(itemToRemove), 1);
        }
    };

    return service;

});

我通过以下方式将apiData注入我的控制器:

 $routeProvider
    .when('/myview', {
        templateUrl: 'views/myview.html',
        controller: 'MyController',
        resolve: {
            queryset: function(MyFactory){
                return MyFactory.getApiData();
            }
        }
    })

app.controller('MyController', ['$scope', 'queryset',
    function ($scope, queryset) {
        $scope.queryset = queryset;
    }
]);

这是在不同控制器之间共享承诺的好方法,还是我最好使用本地存储甚至cacheFactory?

如何重写MyFactory add()和remove()方法,以便我可以将共享变量保持在当前状态(不需要API更新/创建/删除调用)?

谢谢!

1 个答案:

答案 0 :(得分:0)

你应该使用$ resource来获得$ promise,例如:resource.query().$promise而不是$q.defer()以获得更清晰的代码。否则你很高兴去。您可以使用$cacheFactory,但也可以使用local var。

您的共享变量不是当前具有当前代码的状态吗?

我建议您查看ui-router及其嵌套和抽象视图,其中已解析的值可供子控制器使用。