UI-Router 不会解析 $http 调用 [英] UI-Router will not resolve $http call
问题描述
我有一个 api，我想解析泡泡"的名称.这我想注入控制器 - 但问题是我尝试了不同的方法，都只是说......未定义和一些注入问题...... :(
代码:
.state('气泡', {摘要:假，url: "/bubbles/:bubbleId/feed",控制器:'泡泡控制器'，数据: {授权角色:[USER_ROLES.editor]},解决: {已解决的气泡名称:函数($http，$stateParams){var url = 'https://XXXXXXX.net/api/Bubble/11111111-1111-1111-1111-111111111111';返回 $http.get(url).then(功能(响应){console.log('响应' + 响应);返回响应；});},意见:{'导航': {templateUrl: "/raqt/shared/partials/navigation.html"},'主要的': {templateUrl: "/raqt/bubbles/partials/bubbles.html"//控制器:函数($scope，resolvedBubbleName){//$scope.resolvedBubbleName =resolutionBubbleName;////已解决的BubbleName 始终未定义，即////UI 路由器没有注入它//}}},}})在我的控制器中，我尝试了不同的方法，我认为这应该可行...给出错误注入...
BubblesController.$inject = ['$stateParams', '$state', '$log', '$timeout', '$interval', '$scope', 'BubblesService', 'CONFIG','$http', 'resolvedBubbleName'];功能气泡控制器($stateParams，$state，$log，$timeout，$interval，$scope，BubblesService，CONFIG，$http，resolvedBubbleName){$scope.title = '气泡控制器';警报(已解决的气泡名称)；$scope.bubbleId = $state.params.bubbleId;页面错误
错误:[$injector:unpr] 未知提供者:resolvedBubbleNameProvider <-resolutionBubbleName <-BubblesControllerhttp://errors.angularjs.org/1.3.15/$injector/unpr?p0=resolvedBubbleNameProvider%20%3C-%20resolvedBubbleName%20%3C-%20BubblesController在 REGEX_STRING_REGEXP (http://localhost:3604/js/lib/angular/angular.js:63:12)在 http://localhost:3604/js/lib/angular/angular.js:4015:19在 Object.getService [as get] (http://localhost:3604/js/lib/angular/angular.js:4162:39)在 http://localhost:3604/js/lib/angular/angular.js:4020:45在 getService (http://localhost:3604/js/lib/angular/angular.js:4162:39)在 Object.invoke (http://localhost:3604/js/lib/angular/angular.js:4194:13)在 $get.extend.instance (http://localhost:3604/js/lib/angular/angular.js:8493:21)在 http://localhost:3604/js/lib/angular/angular.js:7739:13在 forEach (http://localhost:3604/js/lib/angular/angular.js:331:20)在 nodeLinkFn (http://localhost:3604/js/lib/angular/angular.js:7738:11) 我可以看到 $http 调用有数据，我知道控制器在其他情况下运行良好 - 但是这个解决方案让我发疯.. :(
我将休息几个小时 - 但如果您发现我的代码中有问题，我会回到这个问题，我会回复并回答！... :)
解决方案 我想说的是，您错误地将 views : {} 嵌套到 中解决:{}.有一个工作的plunker
我刚刚将您的定义移到了正确的位置，它正在运行
.state('气泡', {摘要:假，url: "/bubbles/:bubbleId/feed",//控制器:'泡泡控制器'，数据: {authorizedRoles: [{}],//USER_ROLES.editor]},解决: {已解决的气泡名称:['$http'，'$stateParams'，功能($http，$stateParams){//var url = 'https://XXXXXXX.net/api/Bubble/11111111-1111-1...';var url = 'someData.json'返回 $http.get(url).then(功能(响应){console.log('响应' + 响应);返回 response.data;});}],},意见:{'导航': {templateUrl: "raqt/shared/partials/navigation.html",控制器:'泡泡控制器'，},'主要的': {templateUrl: "raqt/bubbles/partials/bubbles.html",控制器:['$scope', 'resolvedBubbleName',函数($scope，resolvedBubbleName){$scope.resolvedBubbleName = resolveBubbleName;}]}},})
另外，一个非常重要的注意事项:
<块引用>controller 属于 view - 不 属于 state
您可以在此处阅读更多信息:
检查工作示例此处
扩展
如果我们按照上述方式调整了所有代码，但会出现此错误:
<块引用>错误:[$injector:unpr] 未知提供者:resolvedBubbleNameProvider <-resolutionBubbleName <-BubblesController
我们很可能处于以下情况之一:
- 我们在状态层次结构的其他地方重用了
"BubblesController"，而没有 resolve : { 'resolvedBubbleName': ... } 到位 - 我们在某处声明了
ng-controller="BubblesController" - 这不是由 UI-Router 管理的.并且它无法访问所谓的 locals(包含已解析的值)
因此，请确保控制器定义在哪里 - 然后所有将开始工作...
I have a api that i want to resolve name for "bubble". This i would like to inject into controller - but problem is that i have tried different approaches and all just say...undefined and some injection problems... :(
Code:
.state('bubbles', {
abstract: false,
url: "/bubbles/:bubbleId/feed",
controller: 'BubblesController',
data: {
authorizedRoles: [USER_ROLES.editor]
},
resolve: {
resolvedBubbleName: function ($http, $stateParams) {
var url = 'https://XXXXXXX.net/api/Bubble/11111111-1111-1111-1111-111111111111';
return $http.get(url)
.then(function (response) {
console.log('response ' + response);
return response;
});
},
views: {
'navigation': {
templateUrl: "/raqt/shared/partials/navigation.html"
},
'main': {
templateUrl: "/raqt/bubbles/partials/bubbles.html"
//controller: function ($scope, resolvedBubbleName) {
// $scope.resolvedBubbleName = resolvedBubbleName;
// // resolvedBubbleName is always undefined, i.e.,
// // UI router is not injecting it
//}
}
},
}
})
In my controller i tried different approaches and this that i think should work... gives error injection...
BubblesController.$inject = ['$stateParams', '$state', '$log', '$timeout', '$interval', '$scope', 'BubblesService', 'CONFIG', '$http', 'resolvedBubbleName'];
function BubblesController($stateParams, $state, $log, $timeout, $interval, $scope, BubblesService, CONFIG, $http, resolvedBubbleName) {
$scope.title = 'bubbles-controller';
alert(resolvedBubbleName);
$scope.bubbleId = $state.params.bubbleId;
Error from page
Error: [$injector:unpr] Unknown provider: resolvedBubbleNameProvider <- resolvedBubbleName <- BubblesController
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=resolvedBubbleNameProvider%20%3C-%20resolvedBubbleName%20%3C-%20BubblesController
at REGEX_STRING_REGEXP (http://localhost:3604/js/lib/angular/angular.js:63:12)
at http://localhost:3604/js/lib/angular/angular.js:4015:19
at Object.getService [as get] (http://localhost:3604/js/lib/angular/angular.js:4162:39)
at http://localhost:3604/js/lib/angular/angular.js:4020:45
at getService (http://localhost:3604/js/lib/angular/angular.js:4162:39)
at Object.invoke (http://localhost:3604/js/lib/angular/angular.js:4194:13)
at $get.extend.instance (http://localhost:3604/js/lib/angular/angular.js:8493:21)
at http://localhost:3604/js/lib/angular/angular.js:7739:13
at forEach (http://localhost:3604/js/lib/angular/angular.js:331:20)
at nodeLinkFn (http://localhost:3604/js/lib/angular/angular.js:7738:11) <div ui-view="main" class="ng-scope">
I can see that $http call is having data and i know controller works well otherwise - but this resolve driving me mad.. :(
I will be off for couple of hours - but i WILL ge back to this if you see some problems in my code i will ge back and answer!... :)
解决方案 I would say, that you've wrongly nested views : {} into the resolve : {}. There is a working plunker
I just moved your definitions into correct positions and it is working
.state('bubbles', {
abstract: false,
url: "/bubbles/:bubbleId/feed",
//controller: 'BubblesController',
data: {
authorizedRoles: [{}], //USER_ROLES.editor]
},
resolve: {
resolvedBubbleName: ['$http', '$stateParams',
function($http, $stateParams) {
//var url = 'https://XXXXXXX.net/api/Bubble/11111111-1111-1...';
var url = 'someData.json'
return $http.get(url)
.then(function(response) {
console.log('response ' + response);
return response.data;
});
}
],
},
views: {
'navigation': {
templateUrl: "raqt/shared/partials/navigation.html",
controller: 'BubblesController',
},
'main': {
templateUrl: "raqt/bubbles/partials/bubbles.html",
controller: ['$scope', 'resolvedBubbleName',
function($scope, resolvedBubbleName) {
$scope.resolvedBubbleName = resolvedBubbleName;
}
]
}
},
})
Also, one very important note:
controller belongs to view - not to state
You can read more here:
Check the working example here
EXTEND
In case, that we adjusted all the code as above and we are provided with this error:
Error: [$injector:unpr] Unknown provider: resolvedBubbleNameProvider <- resolvedBubbleName <- BubblesController
We are most likely in one of these scenarios:
- we have elsewhere in our state hierarchy reused the
"BubblesController", while not having resolve : { 'resolvedBubbleName': ... } in place
- we declared somewhere
ng-controller="BubblesController" - which is not managed by UI-Router. And it does not have access to so called locals (containing resolved values)
so, be sure where is the controller defined - all will start working then...
这篇关于UI-Router 不会解析 $http 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
