Angularjs 等待提供程序完成,然后再进入状态
我正在尝试等待提供程序完成初始化,然后ui路由器继续加载状态 每次进入该状态时,相机都应处于启用状态,无论何时再次处于禁用状态。我将其放入提供程序中,因为它需要在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
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的工作示例:不完全是我想要的,但让我走上了正轨。标记为最终答案,因为它比下面的答案更详细。