UI-Router 不会解析 $http 调用

Question

我有一个要解析“气泡”名称的 api。这我想注入控制器 - 但问题是我尝试了不同的方法，都只是说......未定义和一些注入问题...... :(

代码：

.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
                //}

            }
        },
    }

})

在我的控制器中，我尝试了不同的方法，我认为这应该可行...提供错误注入...

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 调用有数据，并且我知道控制器在其他情况下运行良好 - 但这个解决方案让我发疯.. :(

我会休息几个小时 - 但如果你在我的代码中发现一些问题，我会回到这个问题，我会回来回答！... :)

Answer 1

我会说，您错误地将 views : {} 嵌套到 resolve : {} 中。有a working plunker

我刚刚将您的定义移到正确的位置，它正在工作

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

另外，一个非常重要的注意事项：

controller 属于 view - 不 属于 state

您可以在这里阅读更多内容：

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

检查工作示例here

扩展

如果我们按上述方式调整了所有代码，但出现此错误：

错误：[$injector:unpr] 未知提供者：resolvedBubbleNameProvider

我们最有可能处于以下情况之一：

• 我们在状态层次结构中的其他地方重用了 "BubblesController"，但没有使用 resolve : { 'resolvedBubbleName': ... }
• 我们在某处声明了 ng-controller="BubblesController" - 这不是由 UI-Router 管理的。而且它无权访问所谓的 locals（包含已解析的值）

所以，请确定控制器在哪里定义 - 然后一切都将开始工作......