Question

我正在使用ui-router并尝试使用resolve但没有成功。这是我的app.js状态看起来

.state('addInvestment', {
    url: '/addUpdateInvestment',
    templateUrl: 'js/angular/modules/investment/views/AddUpdateInvestment.html',
    resolve: {
        InvestmentTypes: ["investmentService", function (investmentService) {
            console.log("Resolving dependency...");
            return investmentService.getInvestmentTypes();
        }]
    }
})

它调用我的服务很好，我知道服务返回数据很好，因为我在我的应用程序中的几个地方使用此服务。

这是我的控制器看起来像：

angular.module('InvestmentModule')
    .controller('AddUpdateInvestment',
    ['$scope', 'toaster', '$state', '$stateParams', '$wizard', 'investmentService', 'InvestmentTypes',
    function ($scope, toaster, $state, $stateParams, $wizard, investmentService, InvestmentTypes) {
        $scope.modalData = {};
        $scope.modalData.investmentTypes = InvestmentTypes.items;
    }]);

当我加载页面时，我在chrome中看到以下内容：

Answer 1

您必须删除逗号。然后，您必须在解决完成后加载控制器。几乎你可以尝试在你的状态下使用那个控制器，就像这样。

.state('addInvestment', {
        url:'/addUpdateInvestment',
        controller: 'AddUpdateInvestment as aui',
        templateUrl:'js/angular/modules/investment/views/AddUpdateInvestment.html',
        resolve: {InvestmentTypes: ['investmentService', function(investmentService) {
            console.log("Resolving dependency...");
            return investmentService.getInvestmentTypes();
        }]}, // this will crash if you dont specify other parameter to the state.
    })

编辑：

检查这是否解决了问题

InvestmentTypes: ['investmentService', // use single quotes

编辑2：

似乎解决方案中的注入是这样的：

resolve: {
    InvestmentTypes: function(investmentService) {
            console.log("Resolving dependency...");
            return investmentService.getInvestmentTypes();
        }
}

请查看维基here

Answer 2

我想我发现了问题。

在您的决心中，您将InvestmentTypes用引号

resolve: {
    'InvestmentTypes': ['investmentService', function(investmentService){
        return investmentService.getInvestmentTypes();
    }]
}

如果您将其更改为

resolve: {
    InvestmentTypes: ['investmentService', function(investmentService){
        return investmentService.getInvestmentTypes();
    }]
}

它应该工作。我已经分叉你的plunker，如果你打开开发控制台它应该将它登录到控制台

http://plnkr.co/edit/KOxgOqsGJcTD1URuHEOn?p=preview

Answer 3

最后，经过这么多的斗争，我让它发挥作用。在我的服务中出现问题，在获得响应之后，它调用了一个名为handleResponse的方法。但是这种方法不是工厂的返回类型..我不知道如果我从解决方案中调用它会如何产生任何差异Vs将其称为控制器中的常规服务。但出于某种原因打破了决心。这是我的旧服务..

angular.module('InvestmentModule').factory('investmentService', ['$rootScope', '$http', '$q', function($rootScope, $http, $q){
    return{

        getInvestmentTypes:function()
        {
            return $http.get(this.webServiceUrl+'getAllInstitutionsForDisplay').then(handleResponse, handleError);
        }
}
function handleSuccess(response)
    {
        return response.data;
    }

    function handleError( response ) {
        // The API response from the server should be returned in a
        // nomralized format. However, if the request was not handled by the
        // server (or what not handles properly - ex. server error), then we
        // may have to normalize it on our end, as best we can.
        if (
            ! angular.isObject( response.data ) ||
            ! response.data.message
        ) {
            return( $q.reject( "An unknown error occurred." ) );
        }
        // Otherwise, use expected error message.
        return( $q.reject( response.data.message ) );
    }
}]);

使用新代码，我在方法本身的handleSucess中添加了代码，如下所示。

 getInvestmentTypes:function()
        {
            return $http.get(this.webServiceUrl+'getAllInstitutionsForDisplay').then(function(response){return response.data}, handleError);
        }

我可能必须为handleError做类似的事情，我相信..

但它现在对我很有效。

只有这种方法的问题在于它打破了DRY方法。任何改进它的建议都将受到赞赏..

$ stateProvider解决对控制器无效的依赖关系

3 个答案: