UI的路由器将无法解决$ HTTP调用 [英] UI-Router will not resolve $http call

问题描述

我有我想为泡沫解析名称的API。这一点，我想注入的控制器 - 但问题是，我已经尝试不同的方法和一切只是说...不确定，有些注入问题... ...：（

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: [$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">

我可以看到$ HTTP调用是有数据的，我知道控制器效果很好，否则 - 但这决心把我逼疯..：（

I can see that $http call is having data and i know controller works well otherwise - but this resolve driving me mad.. :(

我会关闭几个小时 - 但我会阁回本，如果你看到一些问题，在我的codeI将GE回来，回答... ...：）

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!... :)

推荐答案

我会说，你已经错嵌套的 的意见：{} 到 解析：{} 。有工作plunker

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:

控制器属于查看 - 不可以到状态的

您可以在这里阅读更多：

You can read more here:

• 是否有声明与角UI路由器状态
相关控制器不同的方式

• Are there different ways of declaring the controller associated with an Angular UI Router state

检查工作的例子 rel=\"nofollow\">

Check the working example here

扩展

在情况下，我们调整所有code如上，我们提供了这个错误：

In case, that we adjusted all the code as above and we are provided with this error:

错误：[$喷油器：unpr]未知提供商：resolvedBubbleNameProvider＆LT; - resolvedBubbleName＆LT; - BubblesController

Error: [$injector:unpr] Unknown provider: resolvedBubbleNameProvider <- resolvedBubbleName <- BubblesController

我们是最有可能在这些场景之一：

We are most likely in one of these scenarios:

• 我们在别处在我们国家层次重复使用的<​​strong> BubblesController ，而没有 解析： {'resolvedBubbleName'：...} 在


• 我们某处声明的 NG-控制器=BubblesController - 这是不是UI的路由器进行管理。而且它没有进入所谓的 当地人 （含解析值）

所以，可以肯定的是控制器定义在哪里 - 都将开始工作，然后...

so, be sure where is the controller defined - all will start working then...

这篇关于UI的路由器将无法解决$ HTTP调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！