Rozstrzyganie routera nie zostanie wprowadzone do kontrolera.

Question

Próbowałem wszystkiego, aby rozwiązać ui-router, aby przekazać jego wartość do danego kontrolera-AppCtrl. Używam wtrysku zależności z $inject i wydaje się, że powoduje to problemy. czego mi brakuje?

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 

    ... 
} 

Edit Oto upadać http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

Podczas korzystania z trasy resolve argumentu jako zależność inj W kontrolerze przypisanym do trasy nie można używać tego kontrolera z dyrektywą ng-controller, ponieważ dostawca usług o nazwie aname nie istnieje. Jest to dynamiczna zależność, która jest wstrzykiwana przez router, gdy tworzy instancję kontrolera do powiązania w odpowiednim widoku częściowym.

Pamiętaj także, aby zwrócić $timeout w twoim przykładzie, ponieważ zwraca obietnicę, w przeciwnym razie Twój argument zostanie rozstrzygnięty bez wartości, tak samo jest w przypadku korzystania z $http lub innej usługi, która zwraca obietnicę.

tj

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

W regulatorze wstrzyknąć zależność rozwiązania.

appControllers.controller('AppCtrl', AppCtrl); 

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

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

w widoku zamiast NG-kontrolera, należy ui-view dyrektywy:

<div ui-view></div> 

Demo

Answer 2

Oto jak pracować z determinacją. Powinno otrzymać obietnicę. Dlatego tworzę odpowiednią usługę.

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

To jest główny pomysł. Można też zrobić coś takiego z $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; 
     } 
    } 
}); 

Są prawie identyczne w działaniu. Różnica polega na tym, że w pierwszym przypadku usługa rozpocznie pobieranie daty, gdy zadzwonisz na numer resolve(), a w drugim przykładzie rozpocznie pobieranie po utworzeniu obiektu fabryki.

Teraz w Twoim stanie.

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