angularjs - 等待 Provider 完成后再进入 State

Question

我正在尝试等待提供程序完成初始化，然后 ui-router 继续加载状态。

每次进入该状态时，相机都应启用，并且每当再次禁用时。我将其放入提供程序中，因为它需要在 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 创建一个 Promise，并使用 resolve 等待它，但在 module.config 级别 $ q 无法注入(inject)(或者我只是不知道如何注入(inject)？)。

我该如何解决这个问题？

Answer 1

$q 可以毫无问题地注入(inject)到您的状态的解析对象中:

配置:

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;
                    }
                ]
            }
        });
    }
]);

Controller :

angular.module('app').controller('rootController', [
    '$scope',
    'data',
    function ($scope, data) {
        $scope.value = data.value;
    }
]);

直接来自其 wiki 上的文档:https://github.com/angular-ui/ui-router/wiki#resolve

这是 Plunker 上的一个工作示例:http://plnkr.co/edit/kJ99Hi0qWx7DJxOVzxgA?p=preview