Router giải quyết sẽ không tiêm vào bộ điều khiển

Question

Tôi đã thử tất cả mọi thứ để có được giải quyết của ui-router để vượt qua giá trị của nó cho bộ điều khiển nhất định-AppCtrl. Tôi đang sử dụng tiêm phụ thuộc với $inject và điều đó có vẻ gây ra sự cố. Tôi đang thiếu gì?

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

khiển

appControllers.controller('AppCtrl', AppCtrl); 

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

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

    ... 
} 

Sửa Dưới đây là một liệng http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview

Answer 1

Khi bạn sử dụng quyết tâm tranh cãi tuyến đường như phụ thuộc inj ection trong bộ điều khiển bị ràng buộc với tuyến đường, bạn không thể sử dụng bộ điều khiển đó với chỉ thị ng bộ điều khiển vì nhà cung cấp dịch vụ có tên aname không tồn tại. Nó là một phụ thuộc động được bộ định tuyến tiêm vào khi nó khởi tạo bộ điều khiển bị ràng buộc trong khung nhìn từng phần tương ứng của nó.

Cũng nhớ trả lại $timeout trong ví dụ của bạn, vì nó trả về lời hứa nếu không, đối số của bạn sẽ được giải quyết mà không có giá trị, cùng trường hợp nếu bạn đang sử dụng $http hoặc dịch vụ khác trả về lời hứa.

tức là

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

Trong bộ điều khiển bơm phụ thuộc quyết tâm.

appControllers.controller('AppCtrl', AppCtrl); 

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

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

trong giao diện thay vì ng-điều khiển, sử dụng ui-view chỉ:

<div ui-view></div> 

Demo

Answer 2

Sau đây là cách tôi làm việc với quyết tâm. Nó sẽ nhận được lời hứa. Vì vậy, tôi tạo ra dịch vụ cho phù hợp.

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

Đây là ý tưởng chính. Bạn cũng có thể làm điều gì đó như thế này với $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; 
     } 
    } 
}); 

Đây là gần như giống hệt trong hành động. Sự khác biệt là trong trường hợp đầu tiên, dịch vụ sẽ bắt đầu tìm nạp ngày khi bạn gọi phương thức dịch vụ resolve() và trong ví dụ thứ hai, nó sẽ bắt đầu tìm nạp khi đối tượng nhà máy được tạo.

Hiện tại ở trạng thái của bạn.

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