通过路由 'resolve:' 指令传递给控制器​​的对象出错并显示 'Unknown Provider' 消息

Object passed to a controller via a route 'resolve:' directive is erring with an 'Unknown Provider' message

我的主要 JS 中有以下代码:

app.service('portfolioData', function($http, LoginData, Config) {
    return {
        load: function() {
            return $http({
                method: 'GET',
                url: getHostnamePort(Config) + '/rest/api/property/list',
                headers: { 
                    'Content-Type': 'application/json',
                    'x-api-token': LoginData.apiToken,
                    'x-api-user': LoginData.apiUser
                }
            }).then( function successCallback( response ) {
                console.log( "Portfolio loaded" );
                return response.data;
            }, function errorCallback ( response ) {
                console.log( "Portfolio load FAILED" );
                console.log( response.status );
                if ( response.status == '401' )
                    $scope.failureMessage = "Unauthorised. Please Login in.";
                return null;
            });
        }
    };
});
...
app.config(function ($routeProvider) {
...
"http://xxxx/~matthew/view/portfolio.view", resolve: { portfolio: function(portfolioData) { return portfolioData.load(); } }});
});

我的目标控制器(在 portfolio.view 中声明)是这样声明的:

app.controller('PortfolioCtrl', [ '$scope', '$http', '$mdDialog', 'LoginData', 'pageData', 'Config', 'portfolio', function ($scope, $http, $mdDialog, LoginData, pageData, Config, portfolio) {

pageData.setTitle( "Portfolio" );
$scope.portfolio = portfolio.result;
$scope.portfolioFailed = false;

解析在路由端工作正常,我可以看到后端调用获取数据,但是当它去渲染视图时,我得到:

我知道可能存在某种范围界定问题,但文档含糊不清,我正在关注的示例 (https://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx) 表明我已正确设置它。

这里有一个陷阱。您必须在 HTML 视图中将控制器定义为 ng-controller="PortfolioCtrl",但是如果您通过 ng-controller 定义控制器,ui-router 将不会注入那些 resolved 依赖项。 =15=]

所以你只需要在状态配置中定义你的控制器:

.state('xyz', {
    templateURL: "http://xxxx/~matthew/view/portfolio.view",
    resolve: {
        portfolio: function(portfolioData) { return portfolioData.load(); }
    },
    controller: 'PortfolioCtrl' // <<=== you need to define it here
});