Angularjs 等待提供程序完成,然后再进入状态

Angularjs 等待提供程序完成,然后再进入状态,angularjs,angular-ui-router,angularjs-injector,angularjs-provider,Angularjs,Angular Ui Router,Angularjs Injector,Angularjs Provider,我正在尝试等待提供程序完成初始化,然后ui路由器继续加载状态 每次进入该状态时,相机都应处于启用状态,无论何时再次处于禁用状态。我将其放入提供程序中,因为它需要在module.config级别可用: .provider("Camera", function CameraProvider() { function init() { //async enableCamera } function exit() { //disableCamera } functio

我正在尝试等待提供程序完成初始化,然后ui路由器继续加载状态

每次进入该状态时,相机都应处于启用状态,无论何时再次处于禁用状态。我将其放入提供程序中,因为它需要在
module.config
级别可用:

.provider("Camera", function CameraProvider() {
  function init() {
    //async enableCamera
  }
  function exit() {
    //disableCamera
  }
  function $get() {
    return { init: init, exit: exit };
  }
});
国家:

var cam = DubCameraProvider.$get(); // this is a hack, but I don't know how to
$stateProvider
.state("CameraState", {
  url: "/camera",
  onEnter: cam.init,
  onExit: cam.exit,
  views: {
    "view": {
        // template: ...,
      controller: "ControllerUsingCamera"
  }
 }
我尝试使用
$q
创建承诺,并使用
解析
等待,但在
module.config
级别无法注入$q(或者我不知道如何注入?)


如何解决这个问题?

resolve
附带依赖项注入。你可以做:

$stateProvider.state("CameraState", {
    url: "/camera",
    onEnter: cam.init,
    onExit: cam.exit,
    views: {
        "view": {
            // template: ...,
            controller: "ControllerUsingCamera"
        }
    },
    resolve: {
        somethingAsync: function($q) {
            var promise = $q.all( /*bunch of promises*/ );
            return promise;
        }
    }
}

$q
可以毫无问题地注入到您所在州的resolve对象中:

配置:

angular.module('app').config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider.state('root', {
            'url': '/',
            'controller': 'rootController',
            'templateUrl': 'root.html',
            'resolve': {
                'data': [
                    '$q',
                    '$timeout',
                    function ($q, $timeout) {
                        var deferred = $q.defer();
                        $timeout(function() {
                          deferred.resolve({
                            'value': 'Foo'
                          });
                        }, 5000);
                        return deferred.promise;
                    }
                ]
            }
        });
    }
]);
控制器:

angular.module('app').controller('rootController', [
    '$scope',
    'data',
    function ($scope, data) {
        $scope.value = data.value;
    }
]);
直接从他们wiki上的文档:


这里有一个关于Plunker的工作示例:

不完全是我想要的,但让我走上了正轨。标记为最终答案,因为它比下面的答案更详细。