UI-Router并解析控制器中的未知提供程序

Question

我在UI-Router .state（）调用中使用resolve。 在我的控制器中，我可以访问值没有问题，但它抛出一个错误如下：

$注射器/ unpr？P0 = ctrlOptionsProvider％20％3C-trlOptions

以下代码抛出错误但允许我访问变量ctrlOptions就好了：

.state('new_user', {
            url: "/user/new",
            templateUrl: "views/user/new.html",
            data: {pageTitle: 'New User'},
            controller: "UserController",
            resolve: {

                ctrlOptions: ['$stateParams', function($stateParams) {

                    return {

                        view: 'new_user',
                    }
                }],
                deps: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({ 
                        name: 'MetronicApp',  
                        insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
                        files: [
                            '../../../assets/global/plugins/bootstrap-datepicker/css/datepicker3.css',
                            '../../../assets/global/plugins/select2/select2.css',

                            '../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js',
                            '../../../assets/global/plugins/select2/select2.min.js', 
                        ]                    
                    });
                }]
            }
        })

---

MetronicApp.controller('UserController', ['$rootScope', '$scope', '$http', '$stateParams', 'ctrlOptions', function($rootScope, $scope, $http, $stateParams, ctrlOptions, $timeout) {}

知道如何解决这个问题吗？

谢谢

Answer 1

从视图中删除ng-controller="UserController" ，让路由器实例化控制器。

在绑定到路由的控制器中使用route resolve参数作为依赖项注入时，不能将该控制器与ng-controller /或任何其他指令一起使用，因为名称为ctrlOptions的服务提供程序不存在。 它是一个动态依赖项，由路由器在实例化控制器以在其各自的局部视图中绑定时注入。 当路由器可以实例化并将控制器绑定到该模板时，不使用ng-controller实例化控制器并使用ng-controller指令启动模板也是一种更好的做法，模板将更加可重用，因为它与控制器没有紧密耦合name（使用ng-controller =“ctrlName”）但仅限于合同。

Answer 2

所以我有同样的问题，但我的设置是不同的。 只是发布它，以防任何人遇到它。 第一次发布答案，所以不确定是否有更好的地方来回答不能解决OP的答案，但仍然解决了问题的变体。

应用状态

我有一个父状态“app”和一个子状态“home”。 当用户登录时，他们通过“app”状态进行解析，然后他们被重定向到“home”状态。

angular
.module('common')
.component('app', {
    templateUrl: './app.html',
    controller: 'AppController',
    bindings: {
        member: '=',
        organization: '=',
    }
})
.config(function ($stateProvider) {
    $stateProvider
        .state('app', {
            redirectTo: 'home',
            url: '/app',
            data: {
                requiredAuth: true
            },
            resolve: {
                member: ['AuthService',
                    function (AuthService) {
                        return AuthService.identifyMember()
                            .then(function (res) {
                                AuthService.setAuthentication(true);
                                return res.data;
                            })
                            .catch(function () {
                               return null;
                            });
                    }
                ],
                organization: ['AuthService',
                    function (AuthService) {
                        return AuthService.identifyOrganization()
                            .then(function (res) {
                                return res.data;
                            })
                            .catch(function () {
                                return null;
                            });
                    }
                ],
                authenticated: function ($state, member) {
                    if (!member)
                        $state.go('auth.login');
                }
            },
            component: 'app',
        });
});

我的解决方案是绑定 。 我之前已经为会员做了这件事，但忘了为组织做这件事，这是我的愚蠢问题。

老家

angular
.module('components')
.component('home', {
    templateUrl: './home.html',
    controller: 'HomeController',
    bindings: {
        member: '=',
        organization: '=',
    }
})
.config(function ($stateProvider) {
    $stateProvider
    .state('home', {
        parent: 'app',
        url: '/home',
        data: {
            requiredAuth: true
        },
        component: 'home',
        resolve: {
            'title' : ['$rootScope',
                function ($rootScope) {
                    $rootScope.title = "Home";
                }
            ],
        }
    });
});

解决方案再次出现在绑定中 。

注意：我没有必要将数据注入我的控制器

function HomeController(AuthService, $state) {
    let ctrl = this;
}

不知道为什么我不必直接注入控制器，因为它可用作ctrl.member和ctrl.organization 。

Answer 3

我刚遇到这个问题，对我来说问题是我将控制器一般分配给角度模块和ui路由器。 例如

我有：

 let app: ng.IModule = angular.module('userManagementApp'); app.controller(PartyViewController.IID, PartyViewController); //NOTICE THIS app.config(['$locationProvider', '$routeProvider', ($locationProvider: ng.ILocationProvider, $routeProvider: any) => { $routeProvider.when("something", { templateUrl: 'views/partyView/partyView.html', controller: PartyViewController.IID, //NOTICE THIS controllerAs: 'pvCtrl', reloadOnSearch: false, resolve: { ... } }) 

但我应该：

 let app: ng.IModule = angular.module('userManagementApp'); app.config(['$locationProvider', '$routeProvider', ($locationProvider: ng.ILocationProvider, $routeProvider: any) => { $routeProvider.when("something", { templateUrl: 'views/partyView/partyView.html', controllerAs: 'pvCtrl', reloadOnSearch: false, resolve: { ... }, controller: PartyViewController }) 

问题发生，因为角度试图自己加载这个控制器但它不应该 - 路由器应该。

Answer 4

这可能是因为这里有额外的逗号吗？

return {
         view: 'new_user',
        }

试着把逗号拿出来。

此外，您忘记在ctrlOptions之后向控制器注入$timeout