路由器解析不会注入控制器

Question

我已尽一切努力让 ui-router 决定将其值传递给给定的控制器——AppCtrl。我正在使用 $inject 的依赖注入，这似乎会导致问题。我错过了什么？

路由

$stateProvider.state('app.index', {
  url: '/me',
  templateUrl: '/includes/app/me.jade',
  controller: 'AppCtrl',
  controllerAs: 'vm',
  resolve: {
    auser: ['User', function(User) {
      return User.getUser().then(function(user) {
        return user;
      });
    }],
  }
});

控制器

appControllers.controller('AppCtrl', AppCtrl);

AppCtrl.$inject = ['$scope', '$rootScope'];

function AppCtrl($scope, $rootScope, auser) {
  var vm = this;
  console.log(auser); // undefined

  ...
}

编辑 这是一个笨拙的http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

以下是我如何解决问题。它应该得到承诺。所以我相应地创建了服务。

app.factory('User', function($http){
    var user = {};
    return {
        resolve: function() {
            return $http.get('api/user/1').success(function(data){
                user = data;
            });
        },
        get: function() {
            return user;
        }
    }
});

这是主要思想。你也可以用$q做这样的事情

app.factory('User', function($q, $http){
    var user = {};
    var defer = $q.defer();

    $http.get('api/user/1').success(function(data){
        user = data;
        defer.resolve();
    }).error(function(){
        defer.reject();
    });

    return {
        resolve: function() {
            return defer.promise;
        },
        get: function() {
            return user;
        }
    }
});

这些在行动上几乎相同。不同之处在于，在第一种情况下，服务将在您调用服务的resolve() 方法时开始获取日期，而在第二种情况下，它将在创建工厂对象时开始获取。

现在在你的状态。

$stateProvider.state('app.index', {
  url: '/me',
  templateUrl: '/includes/app/me.jade',
  controller: function ($scope, $rootScope, User) {
    $scope.user = User.get();
    console.log($scope.user);
  },
  controllerAs: 'vm',
  resolve: {
    auser: function(User) {
      return User.resolve()
    }
  }
});

Answer 2

当您在绑定到路由的控制器中使用路由解析参数作为依赖注入时，您不能将该控制器与 ng-controller 指令一起使用，因为名称为 aname 的服务提供者不存在。它是由路由器在实例化控制器时注入的动态依赖关系，以绑定到其各自的局部视图中。

还记得在您的示例中返回$timeout，因为它返回一个promise，否则您的参数将在没有值的情况下被解析，如果您使用$http 或其他返回promise 的服务，情况也是如此。

即

  resolve: {
    auser: ['$timeout', function($timeout) {
      return $timeout(function() {
        return {name:'me'}
      }, 1000);
    }],

在控制器中注入解析依赖。

appControllers.controller('AppCtrl', AppCtrl);

AppCtrl.$inject = ['$scope', '$rootScope','auser']; //Inject auser here

function AppCtrl($scope, $rootScope, auser) {
  var vm = this;
  vm.user = auser;
}

在视图而不是 ng-controller 中，使用ui-view 指令：

<div ui-view></div>

Demo