ルータの解決がコントローラに注入されない

Question

私は、ui-routerの解決を得て、指定されたコントローラ-AppCtrlにその値を渡すことを試みました。私は$injectで依存関係注入を使用していますが、それは問題を引き起こすようです。私は何が欠けていますか？あなたは依存関係INJとして、経路解決の引数を使用する場合

ルーティング

$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 

    ... 
} 

編集 はここplunk http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

ですルートにバインドされたコントローラでは、anameという名前のサービスプロバイダが存在しないため、ng-controllerディレクティブでそのコントローラを使用することはできません。これは、ルータがそれぞれの部分ビューでバインドされるようにコントローラをインスタンス化するときに、ルータによって注入される動的な依存関係です。

また、それは約束がそうでなければ、あなたの引数は値なしで解決されます返すので、あなたが$httpや約束を返す別のサービスを使用している場合は、同じような場合は、あなたの例では$timeoutを返すように覚えています。コントローラで

すなわち

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

解決の依存関係を注入します。ビューの代わりに、NG-コントローラで

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()サービスメソッドを呼び出すとサービスが日付を取得し始め、2番目の例では、ファクトリオブジェクトの作成時にフェッチを開始するという点です。

あなたの状態です。

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