AngularJS-在ng重复迭代期间无法从服务器接收数据

我正在构建一个应用程序，它接收一个带有youtube视频链接的简单数组，以及一些其他数据。我正在使用

ng repeat

构造几个

html

DOM元素。在中继器的每次迭代中，我都需要调用一个函数并传递当前的youtube链接。该函数调用将链接传递到后端进行进一步处理，并最终返回以下格式的对象：

var obj = {
    duration: "1H34M45S",
  more_data:{
    title: "some title",
    height: "200px",
    width: "100px",
    date_posted: "oct 2, 1734"
  }
}

显然，我当前的实现不起作用（无限循环）。在

ng repeat

迭代过程中，接收和使用数据的正确方法是什么

HTML:

编辑

： 以下是我在控制台中遇到的错误：

<b>Notice</b>:  Undefined offset: 1 in <b>C:\xampp\htdocs\controllers\youtubeInfo.php</b> on line <b>22</b><br />
{"duration":{"kind":"youtube#videoListResponse","etag":"\"q5k97EMVGxODeKcDgp8gnMu79wM\/Rk41fm-2TD0VG1yv0-bkUvcBi9s\"","pageInfo":{"totalResults":0,"resultsPerPage":0},"items":[]},"vid_data":null}

HTML:

{{getVideoInfo（vid.url）}
{{test.duration}}

承诺不返回数据值，而是要在成功中进行协助

function(videoUrl) {
  $http({
    url: "youtubeInfo.php",
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({getInfo: videoUrl})
  }).success(function(data, status, headers, config) {
    console.log(data);
    $scope.getVideoInfo = data; //data is an object
  }).error(function(data, status, headers, config) {});
}

尝试使用此

      {{getVideoInfo(vid.url).duration}}

---

我建议在这里使用$resource，因为它返回一个在请求完成后填充的对象，因此可以轻松地在模板中使用

$resource

因此，你应该得到这样的结果（未经测试）：

在模板中，应该使用nginit执行一次请求，然后根据需要使用对象

 <div class="row" ng-repeat="vid in videosArray" ng-init="videoInfo = getVideoInfo(vid.url)">
  <div class="col-lg-12 col-md-12 col-sm-12">
  <iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen></iframe>
  <p>{{videoInfo.title}} {{videoInfo.duration}}</p>
 </div>

{{videoInfo.title}{{videoInfo.duration}}

你所说的“承诺不返回数据值”是什么意思？？请参阅更新答案中的链接我问你的具体原因是，它的声明完全不正确

承诺不返回数据值

。这不是一个承诺吗

$http

？你的解决方案看起来不错，但解释中有关于承诺的不正确的

信息

，“承诺不返回数据值”。基本上不是问题。承诺有能力返回数据以遵循链承诺机制。仅供参考问题是

getVideoInfo（vid.url）

即使我们从

getVideoInfo

函数返回值，视图中使用的也会得到一个值。这就是为什么在$http调用成功后需要将其分配给scope变量console.log的输出是什么

<div class="col-lg-12">
  <iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen></iframe>
  <p>{{getVideoInfo(vid.url)}}</p><span>{{test.duration}}</span>
</div>

function(videoUrl) {
  $http({
    url: "youtubeInfo.php",
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({getInfo: videoUrl})
  }).success(function(data, status, headers, config) {
    console.log(data);
    $scope.getVideoInfo = data; //data is an object
  }).error(function(data, status, headers, config) {});
}

      {{getVideoInfo(vid.url).duration}}

var VideoInfo = $resource('youtubeInfo.php', null, { 'get': {method:'POST'} }); // BTW: Think about if this request needs POST as method...

$scope.getVideoInfo = function(videoUrl) {
  return VideoInfo.get({getInfo: videoUrl}, function(value, responseHeaders) {
   // Do some logging or whatever...
  });
}

 <div class="row" ng-repeat="vid in videosArray" ng-init="videoInfo = getVideoInfo(vid.url)">
  <div class="col-lg-12 col-md-12 col-sm-12">
  <iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen></iframe>
  <p>{{videoInfo.title}} {{videoInfo.duration}}</p>
 </div>