AngularJS - UI路由器 - 无法使用resolve为我的控制器提供数据

Question

我正在尝试将带有加载数据的解析对象注入我的控制器，但是出现Unknown Provider错误：

  

未知提供者：configServiceProvider＆lt; - configService

这是我的代码：

StateProvider

$stateProvider
    .state('index', {
        abstract: true,
        url: "/index",
        templateUrl: "#",
        resolve: {                
            configService: function () {
                return {
                    "helloText": "Welcome in Test Panel"
                };
            }
        }
    })

控制器

function MainCtrl($scope, configService) {
    $scope.config = configService;
};

angular.module('dot', ['ui.router'])
    .config(config)
    .controller('MainCtrl', MainCtrl)

段

＆＃13;

＆＃13;

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)
})();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

就像我的控制器加载后定义我的解析对象一样......我是angularJS的新手，我觉得我肯定错过了一些非常明显的东西。

感谢。

Answer 1

ng-controller和UI-Router州resolve不兼容。这就是为什么你的另一个世界＆＃34; ＆＃39; MainCtrl＆＃39;无法注入UI-Router中定义的解析/服务。

但有一种简单的方法，只需将其转换为状态：

// 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',
})

原始 root 状态＆＃39;索引＆＃39;现在将被放置在一个真实的，但是抽象的，不影响状态的网址中 - ＆＃39; root＆＃39;

// 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: { }
})

调整后的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>

也许还要检查 - Nested states or views for layout with leftbar in ui-router?