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

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

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

还请记住在您的示例中使用 return $timeout，因为它 return 是一个承诺，否则您的论点将毫无价值地得到解决，如果您使用 $http 或其他 return 承诺的服务。

即

  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

Answer 2

以下是我下定决心工作的方式。它应该得到承诺。所以我相应地创建服务。

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

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

Router resolve will not inject into controller

javascript

angularjs

angularjs-service

angular-ui-router