将 $state 服务添加到 angularjs 模块中的引用时出错答案

【问题标题】：An error when I add $state service to my references in angularjs module将 $state 服务添加到 angularjs 模块中的引用时出错
【发布时间】：2015-08-07 19:17:05
【问题描述】：

在我的教程项目中使用$state 服务时遇到一些问题。

这是我的模块和配置定义：

(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource"])

    .config(["$stateProvider", "$urlRouterProvider","$state", function ($stateProvider, $urlRouterPorvider,$state) {
        $urlRouterPorvider.otherwise("/game/MultiStepForm/step1");
        $urlRouterProvider.otherwise("/game/Home");
        $stateProvider
            .state("Home", {
                url: "/game/Home",
                templateUrl: "/app/game/GameView.html",
                controller: "GameController",
                controllerAs: "vm"
            });

        $stateProvider
            .state("Log", {
                url: "/Game/Log",
                templateUrl: "/app/Log/GameLogView.html",
                controller: "GameLogController",
                controllerAs: "vm"

                onEnter: function () {
                    $state.go("MultiStepForm");
                }
            });

        $stateProvider
        .state("MultiStepForm.view", {
            url: "/Game/MultiStepFormView",
            templateUrl: "/app/MultiStepForm/MultiStepFormView.html",
            controller: "MultiStepFormViewController",
            controllerAs: "MultiStepViewLogic"
        })

        $stateProvider
    .state("MultiStepForm.Edit", {
        url: "/Game/MultiStepFormEdit",
        templateUrl: "/app/MultiStepFormEdit/MultiStepForm.html",
        controller: "MultiStepFormEditController",
        controllerAs: "MultiStepEditLogic"
    })
    }]);
})();

我想使用这一行：

$state.go();

为此，我将 $state 服务添加到引用，但是，当我添加到

引用$state 服务我开始得到这个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module sensorManagement due to:
Error: [$injector:unpr] Unknown provider: $state
http://errors.angularjs.org/1.4.2/$injector/unpr?p0=%24state
...

知道为什么会出现上述错误吗？我错过了什么？

【问题讨论】：

正如@Pankaj Parkar 在下面的答案中提到的$state 在config 阶段将不可用，但是onEnter/onExit 可以访问所有已解决的依赖项。至此，您是否尝试在onEnter 中使用$state 并期望注入.config 来处理此分辨率？
@Matt 所以我不需要注入如果我使用 onEnter/onExit ?
这将取决于上下文；您仍然必须注入$state 服务，但您必须在使用它的区域执行此操作。例如，如果您将$state 服务解析为"Log" 状态，那么您在该状态下的onEnter/onExit 将可以访问它，并且上面的代码应该符合您的预期。跨度>

标签： angularjs routing angular-ui-router angularjs-routing angular-services

【解决方案1】：

您只能在 angular 的配置阶段访问提供程序，$state 依赖项在该阶段将不可用，因为 $state 是 provider，并且您已经通过附加 Provider 前缀在配置函数中访问它喜欢$stateProvider。

如果您的目标是重定向路由，那么您可以在运行块中使用 $state 依赖项。从那里使用$state.go

app.run(function($state){
    $state.go('somestate')
})

【讨论】：

状态加载后我想激活另一个状态。知道如何实现它吗？
@Michael 我没听明白你说的是哪个州？

【解决方案2】：

我相信您在您所在的州缺少一项决议。你可以试试这样的：

$stateProvider
    .state("Log", {
        url: "/Game/Log",
        templateUrl: "/app/Log/GameLogView.html",
        controller: "GameLogController",
        controllerAs: "vm",
        resolve: {$state: '$state'},
        onEnter: function ($state) {
            $state.go("MultiStepForm");
        }
});

有关onEnter 和onExit 回调如何工作的更多信息，请参阅documentation。基本上上述问题没有正确注入$state服务，因此由于回调无法访问$state而无法转换状态。

您还需要删除配置中的注入：

.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {

【讨论】：

我尝试了您的解决方案，但现在出现此错误：TypeError: Cannot read property '@' of null
@Michael 我怀疑这与上述代码中的任何内容都无关。除了问题中的一些错字（例如$urlRouterPorvider）之外，我手头上可能还有其他我无法从这里看到的问题。但要回答这个问题，这个答案会让你的onEnter 访问$state