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

Router resolve will not inject into controller

本文关键字：注入 控制器 路由器      更新时间：2023-09-26

我已经尝试了一切来让ui路由器的决心将其值传递给给定的控制器–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

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

还要记住在您的示例中返回 $timeout，因为它返回一个 promise，否则您的参数将在没有值的情况下解析，如果您使用的是返回 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 控制器中，使用 ui-view 指令：

<div ui-view></div>

演示

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

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()
    }
  }
});
相关文章：