如何使用AngularJS链接api调用

时间:2014-01-10 03:44:09

标签: javascript angularjs

我是angualrJS和Web开发的新手。我有一个名为FavoritesCtrl的控制器,它进行api调用并返回一个对象。

我的控制器看起来像这样:

controllers.controller('FavoritesCtrl', function($scope, $http) { 
  $http.jsonp('https://api...=JSON_CALLBACK').then(function (scooby){
    $scope.list=scooby.data;
  });
});

我用我的html访问返回的数据:

<div ng-controller="FavoritesCtrl">
  <li ng-repeat="favorite in list.favorites">
<div>product_id: {{ favorite.product_id }} </div>

我需要将{{ favorite.product.id }}作为参数发送回另一个api调用中,这样我就可以生成联盟链接,但我不知道最有棱角的方式。

我应该尝试在FavoritesCtrl中发送第二个电话,还是将它放入新控制器?

我可以通过以下方式获得正确的会员链接:

controllers.controller('FavoritesCtrl', function($scope, $http) { 
  $http.jsonp('https://api...=JSON_CALLBACK').then(function (scooby){
    $scope.list=scooby.data;

    var length = scooby.data.favorites.length;
    var i;

    for (i=0;i<length;i+=1){
      var getProductId = scooby.data.favorites[i].product_id;
      $http.jsonp('https://api...+getProductId+'&callback=JSON_CALLBACK').then(function (fred){
      console.log(fred.data.link);
    });
  });
});

但是我无法想出一个在我的页面上显示相关项目的好方法。任何建议将不胜感激。

谢谢!

3 个答案:

答案 0 :(得分:0)

你走在正确的轨道上。我想在控制器的for循环中,只需要放置$ scope.list.favorites [i] .affiliateLink = [无论具体会员链接的返回值应该是什么];

然后在HTML中,它只会插入为{{favorite.affiliateLink}}

答案 1 :(得分:0)

您可能希望使用ng-click,这将调用控制器中的另一种方法:

<li><a ng-click="doSomething(favorite.product_id)" href="">{{favorite.product_id}}</a></li>

在您的控制器中:

$scope.doSomething = function (prodId) {
  // Do whatever you want here
};

答案 2 :(得分:0)

您可以使用您已有的工具 - 承诺以更优雅的方式完成此任务。承诺可以帮助你链接这样的事件。

一个简单的例子是:

get('story.json').then(function(response) {
  return JSON.parse(response);
}).then(function(response) {
  console.log("Yey JSON!", response);
});

可以在这里找到对承诺的非常好的介绍[1]。

[1] http://www.html5rocks.com/en/tutorials/es6/promises/