Question

我刚刚开始使用带有Ionic的Angular，到目前为止它很棒，除了我的电子商务应用程序的问题，我正在做两个ajax请求，一个加载供应商名称，另一个加载产品。我知道我可以把它放在同一个请求中，但由于其他原因，需要将它分开。

有时供应商名称已设置，有时会失败。它似乎是完全随机的，如果我把一个调试器放在适当的位置它总是工作，所以似乎与时间有关。

.controller('VendorProductsCtrl', function($scope, $stateParams, $http) {

  var vendor_name_url = 'URL FOR VENDOR NAME';

  $http.get(vendor_name_url)
    .success(function(response){
      $scope.vendor_name = response.meta.vendor_name;
      //debugger; this always works!
    })
    .error(function(data) {
      console.log('server error');
    })

  $scope.products = [];

  $scope.loadMore = function() {

    var url = 'URL FOR PRODUCTS';

    $http.get(url)
      .success(function(response){
        $scope.products = response.products;
      })
      .error(function(data) {
        console.log('server error');
      })
  };
})

在我对Angular土地的新探索中似乎有一些基本的东西。谢谢你的帮助。

P.S我使用Ionic的无限滚动调用loadMore（）

搞定了，但看起来有点狡猾！

  setTimeout(function () {
    $scope.$apply(function () {
      $scope.vendor_name = response.meta.vendor_name;
    });
  }, 500);

我并不热衷于等待500毫秒或其他任何事情，如果它早些时候准备好了，还有更好的方法吗？

Answer 1

在应用$scope之前，供应商名称的http请求似乎是一个问题。

将$scope.vendor_name的定义移到promise回调之外。

$scope.vendor_name = '';

$http.get(vendor_name_url).success(function(response){
    $scope.vendor_name = response.meta.vendor_name;
})
.error(function(data) {
  console.log('server error');
});

loadMore()正常工作，因为$scope在控制器连线期间的变量为products = [];。之后的所有内容都会影响更新的范围生命周期。

修改

我会尽量避免使用$scope.$apply函数，因为您随后会开始在任何地方使用它，这会使您的服务和控制器的维护变得非常困难。

解决此问题的另一种方法是在路线上使用结算。

http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

这是将多个数据片段放入路径定义的控制器的好方法。路由器对控制器的连接负责确保数据在运行时可以在控制器上进行依赖注入。

Answer 2

使用$q.all

$q.all([
    $http.get(vendor_name_url),
    $http.get(url)
]).then(function(_responses){
    $scope.vendor_name = _responses[0].meta.vendor_name;
    $scope.products = _responses[1].products;
})

在同一个控制器上调用Angular multiple ajax有时不起作用

2 个答案: