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