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

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

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

即

  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

以下是我使用resolve的方式。它应该得到承诺。所以我相应地创建了服务。

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

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

2 个答案: