Router Auflösung wird nicht in den Controller injizieren

Question

Ich habe alles versucht, UI-Router-Auflösung zu erhalten, um seinen Wert an die angegebene Controller-AppCtrl zu übergeben. Ich verwende Dependency-Injektion mit $inject, und das scheint die Probleme zu verursachen. Was vermisse ich?

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; 
     }); 
    }], 
    } 
}); 

-Controller

appControllers.controller('AppCtrl', AppCtrl); 

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

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

    ... 
} 

bearbeiten Hier ist ein zupfen http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

Wenn Sie Route resolve Argument als Abhängigkeit inj verwenden Im Controller, der an die Route gebunden ist, können Sie diesen Controller nicht mit der ng-controller-Direktive verwenden, da der Service Provider mit dem Namen aname nicht existiert. Es ist eine dynamische Abhängigkeit, die vom Router injiziert wird, wenn der Controller in seiner jeweiligen Teilansicht gebunden wird.

Denken Sie auch daran, $timeout in Ihrem Beispiel zurückzugeben, weil es ein Versprechen zurückgibt, andernfalls wird Ihr Argument ohne Wert aufgelöst, gleiches gilt, wenn Sie $http oder einen anderen Dienst verwenden, der eine Zusage zurückgibt.

d.h

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

In der Steuerung injizieren, um die Vorsatz-Abhängigkeit.

appControllers.controller('AppCtrl', AppCtrl); 

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

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

in der Ansicht statt ng-Controller verwenden ui-view Richtlinie:

<div ui-view></div> 

Demo

Answer 2

Hier ist, wie ich mit Entschlossenheit arbeiten. Es sollte Versprechen erhalten. Also erstelle ich Service entsprechend.

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

Dies ist Hauptidee. Sie können auch mit $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; 
     } 
    } 
}); 

Diese sind fast identisch in Aktion etwas tun. Der Unterschied besteht darin, dass der Dienst im ersten Fall das Abrufdatum beginnt, wenn Sie die Methode resolve() aufrufen, und im zweiten Beispiel wird der Abruf gestartet, wenn das Factory-Objekt erstellt wird.

Jetzt in Ihrem Zustand.

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