Решение маршрутизатора не вводится в контроллер

Question

Я пробовал все, чтобы получить разрешение ui-router передать его значение данному контроллеру-AppCtrl. Я использую инъекцию зависимостей с $inject, и это, похоже, вызывает проблемы. Что мне не хватает?

Routing

$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 не существует. Это динамическая зависимость, которая вводится маршрутизатором, когда он создает связь с контроллером в соответствующем частичном представлении.

Также не забудьте вернуть $timeout в ваш пример, потому что он возвращает обещание, иначе ваш аргумент будет разрешен без значения, так же, если вы используете $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; 
} 

в представлении вместо нг-контроллера, используйте 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() 
    } 
    } 
});