UI-路由器和解析器，控制器中的未知提供程序

Question

我在 UI-Router .state() 调用中使用 resolve。在我的控制器中，我可以毫无问题地访问这些值，但它会抛出如下错误：

$injector/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

可能是因为这里多了一个逗号？

return {
         view: 'new_user',
        }

试着去掉逗号。

此外，您忘记在 ctrlOptions

之后将 $timeout 注入您的控制器

Answer 2

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

当您在绑定到路由的控制器中使用路由解析参数作为依赖项注入时，您不能将该控制器与 ng-controller/or 任何其他指令一起使用，因为名称为 ctrlOptions 的服务提供商不存在。它是路由器在实例化要绑定到其各自局部视图中的控制器时由路由器注入的动态依赖项。当路由器可以实例化控制器并将其绑定到该模板时，最好不要使用 ng-controller 实例化控制器并使用 ng-controller 指令启动模板，模板将更具可重用性，因为它与控制器没有紧密耦合名称（使用 ng-controller="ctrlName" ）但仅使用合同。

Answer 3

所以我遇到了同样的问题，但我的设置不同。只是张贴它以防万一有人遇到它。第一次发布答案，所以不确定是否有更好的地方可以放置不能解决 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 4

我刚遇到这个问题，对我来说，问题是我通常将控制器分配给 angular 模块和 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
        })

出现问题是因为 angular 尝试自行加载此控制器，但它不应该 - 路由器应该。

UI-路由器和解析器，控制器中的未知提供程序

UI-Router and resolve, unknown provider in controller

javascript

angularjs

angular-ui-router

应用状态

家乡