解析 Factory 函数返回的 AngularJS 承诺

Question

我有一个具有getProduct(id) 函数的工厂对象，如下所示

angular.module('app')
    .factory('productFactory', ['$http', 'URL', function($http, URL){

        var urlBase = URL.APISERVER;

        //productFactory return object
        var productFactory = {};

        productFactory.getProducts = function(){
            return $http.get(urlBase + '/products/');
        }

        productFactory.getProduct = function(id){
            return $http.get(urlBase + '/products/' + id);
        }
        //return factory object
        return productFactory;
    }]);

在我的控制器中，我想解决 getProduct(id) 的承诺。我正在另一个函数getProduct(id) 中解决这个承诺，我在其中传递了产品ID。

angular.module('portal')
    .controller('ProductCtrl', ['$stateParams','productFactory', 
      function($stateParams, productFactory){
        //Using 'controller as syntax' in view
        var prod = this;

        //Saves status of promise
        prod.status;

        //Get a single product
        prod.product;

        //Get the product id from stateParams and pass that to
        //productFactory's getProduct(id) function
        var id = $stateParams.id;
        getProduct(id);//THIS IS WHAT CAUSES THE 500 ERROR

        //Resolves promise 
        function getProduct(id){
          productFactory.getProduct(id)
            .success(function(product){
              prod.product = product;
            })
            .error(function(error){
              prod.status = 'Unable to load product data' + error.message;
            });
        }


    }]);

但是，当我在控制器中调用 getProduct(id); 时，我得到了 500 error，这是因为在控制器编译时我还没有访问 $stateParams.id 的权限。

我有一份产品清单。单击特定产品时，我将被重定向到该单个产品的视图。到目前为止，它适用于500 error。任何想法如何解决这个问题。我最初的想法是有条件地在我的控制器中调用getProduct(id);。我确信有更好的方法来做到这一点。

更新

这里是这个状态的相关路由配置。

.state('products-view', {
  url: '/products/:id',
  templateUrl: '/core/products/view.html'
})

Answer 1

我使用类似下面的东西来解决使用 ui-router 的 http 请求。

$stateProvider
    // nested list with custom controller
    .state('home.list', {
        url: '/list/:id',
        templateUrl: 'partial-home-list.html',
        resolve:{
          // Inject services or factories here to fetch 'posts'
          posts:function($http, $stateParams){
            return $http.get('//jsonplaceholder.typicode.com/posts/' + ($stateParams.id || 1));
          }
        },
        // resolved 'posts' get injected into controller
        controller: function(posts, $scope){
          $scope.posts = posts.data;
        }
    })

您可以像我一样依赖注入 productFactory 而不是 $http。 resolve 中指定的 posts 键可以依赖注入到指定为函数或字符串的控制器中。