AngularJS - UI 路由器 - 无法使用解析为我的控制器提供数据 [英] AngularJS - UI Router - Unable to use resolve to provide my controller with data
问题描述
我正在尝试将一个已加载数据的解析对象注入到我的控制器中,但我收到一个 Unknown Provider
错误:
未知提供者:configServiceProvider <- configService
这是我的代码:
状态提供者
$stateProvider.state('索引', {摘要:真实,网址:/索引",模板网址: "#",解决: {配置服务:函数(){返回 {"helloText": "欢迎来到测试面板"};}}})
控制器
function MainCtrl($scope, configService) {$scope.config = configService;};angular.module('dot', ['ui.router']).config(配置).controller('MainCtrl', MainCtrl)
片段
function config($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise("#");$stateProvider.state('索引', {摘要:真实,网址:/索引",模板网址: "#",解决: {配置服务:功能(){返回 {"helloText": "欢迎来到测试面板"};}}})};函数 MainCtrl($scope, configService) {$scope.config = configService;};(功能() {angular.module('点', ['ui.router',//路由]).config(配置).run(function($rootScope, $state) {$rootScope.$state = $state;}).controller('MainCtrl', MainCtrl)})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script><div ng-app="点"><div ng-controller="MainCtrl as main">
就像我的解析对象是在我的控制器加载后定义的......我是 angularJS 的新手,我觉得我肯定错过了一些非常明显的东西.
谢谢.
ng-controller
和 UI-Router
状态 resolve
不兼容.这就是为什么您的另一个世界"'MainCtrl' 无法注入 UI-Router 中定义的解析/服务.
但是有一个简单的方法,就是把它转换成状态:
//全新的 root state,提供 root (index.html) 的东西//不影响 url 或状态名称.state('root', {摘要:真实,template: '<div ui-view=""></div>',//子状态的目标解决: {configService: function () {//为层次结构中的任何状态做好准备返回 {"helloText": "欢迎来到测试面板"};}},//全新的一行,带有MainCtrl",现在是 UI-Router 的一部分控制器:'MainCtrl',})
原来的root状态'index'现在将被放置在一个真实的、但抽象的、不影响状态的url - 'root'
//调整状态.state('index', {//将被注入父模板父母:'根'摘要:真实,网址:/索引",模板网址:...,//不需要解析,已经在 root 中完成//解决: { }})
调整后的 index.html
<div ui-view="></div>//这里会注入根状态,用'MainCtrl'//<div ng-controller="MainCtrl as main">//////
也许还可以检查 - ui-router 中带有左栏的布局的嵌套状态或视图?
I am trying to inject a resolve object with loaded data into my controller but I get an Unknown Provider
error :
Unknown provider: configServiceProvider <- configService
Here is my code:
StateProvider
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "#",
resolve: {
configService: function () {
return {
"helloText": "Welcome in Test Panel"
};
}
}
})
Controller
function MainCtrl($scope, configService) {
$scope.config = configService;
};
angular.module('dot', ['ui.router'])
.config(config)
.controller('MainCtrl', MainCtrl)
Snippet
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("#");
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "#",
resolve: {
configService: function() {
return {
"helloText": "Welcome in Test Panel"
};
}
}
})
};
function MainCtrl($scope, configService) {
$scope.config = configService;
};
(function() {
angular.module('dot', [
'ui.router', // Routing
])
.config(config)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
})
.controller('MainCtrl', MainCtrl)
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<div ng-app="dot">
<div ng-controller="MainCtrl as main">
<div ui-view>
</div>
</div>
</div>
It's like my resolve object is defined after my controller has loaded... I'm new to angularJS and I feel like I am definitely missing something very obvious.
Thanks.
The ng-controller
and UI-Router
state resolve
are incompatible. That's why your "another-world" 'MainCtrl' cannot be injected with a resolve/service defined in UI-Router.
But there is a simple way, just convert it into state:
// brand new root state, providing root (index.html) stuff
// not effecting url or state names
.state('root', {
abstract: true,
template: '<div ui-view=""></div>', // a target for child state
resolve: {
configService: function () { // ready for any state in hierarchy
return {
"helloText": "Welcome in Test Panel"
};
}
},
// brand new line, with 'MainCtrl', which is part of UI-Router now
controller: 'MainCtrl',
})
The original root state 'index' will now be placed inside of a real, but abstract, url not effecting state - 'root'
// adjusted state
.state('index', { // will be injected into parent template
parent: 'root'
abstract: true,
url: "/index",
templateUrl: ...,
// resolve not needed, already done in root
//resolve: { }
})
Adjusted index.html
<div ng-app="dot">
<div ui-view="></div> // here will be injected root state, with 'MainCtrl'
//<div ng-controller="MainCtrl as main">
// <div ui-view>
// </div>
//</div>
</div>
Maybe also check - Nested states or views for layout with leftbar in ui-router?
这篇关于AngularJS - UI 路由器 - 无法使用解析为我的控制器提供数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!