使用 angularjs 获取 json url 链接 (Youtube) 以显示

Question

我正在尝试使用 AngularJS 从具有视频对象的 json 文件中获取数据。但是，我只能根据其他 resources/references 找出如何获取一个特定的 url 并使用 $sce 将其连接到 http://youtube.com/embed/ link。我希望能够将 links 存储到 json 文件中的多个视频，并能够获取这些 links 并将它们插入下面提供的文本中。我希望能够在底部代码集的 $scope.video = ... 中插入一些内容，但我不知道该放什么。

我知道我需要发出 $http 请求，类似于此才能获取数据：

myApp.controller('mainController', ["$scope", "$http", function($scope, $http) {

    $http.get('json/data.json').then(function(resource) {
      $scope.videoList = resource.items;
    });

json/data.json 看起来像这样：

{
  "items": [{
    "id": 1,
    "name": "Fall Afresh",
    "url": "8VdXLM8H-xU",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 2,
    "name": "Furious",
    "url": "bhBs1_iCF5A",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 3,
    "name": "God of the Redeemed",
    "url": "m1n_8MUHZ0Q",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 4,
    "name": "Be Enthroned",
    "url": "98cNpM-yh-I",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 5,
    "name": "This is Amazing Grace",
    "url": "Bn5zk3yCRr0",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }]
}

var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope) {
  $scope.video = 'H_TnSwrNeWY';
});

myApp.directive('angularYoutube', function($sce) {
  return {
    restrict: 'E',
    scope: {
      video: '='
    },
    replace: true,
    template: '<div style="height:300px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="1" allowfullscreen></iframe></div>',
    link: function(scope) {
      console.log('here');
      scope.$watch('video', function(newVal) {
        if (newVal) {
          scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
        }
      });
    }
  }
});

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">

<head>
  <title>Display JSON Data using AngularJS</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">

  <!-- load bootstrap and fontawesome via CDN -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

  <!-- load angular via CDN -->
  <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>

  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">JSON Data with AngularJS</a>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">

    <div ng-controller="mainController">
      <angular-youtube video="video">
      </angular-youtube>
    </div>

  </div>

</body>

</html>

Answer 1

显示的代码中存在几个问题。

在 iframe 上使用 ng-src 以防止在 url 不可用时出现错误请求

要访问 $http resource 对象中的数据，您需要先访问 data 属性

$scope.videoList = resource.data.items;

作为起点，您可以通过以下方式设置第一个视频：

$scope.video = resource.data.items[0].url; // or $scope.videoList[0].url

Working demo

Answer 2

第一个代码片段是错误的：

myApp.controller('mainController', ["$scope", "$http", function($scope, $http) {

    $http.get('json/data.json').then(function(resource) {
      //ERRONEOUS
      //$scope.videoList = resource.items;
      //USE INSTEAD
      $scope.videolist = resource.data.items;
    });

一个 http 承诺 returns 一个响应对象：

$http(...).
  then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  }, function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

有关详细信息，请参阅 AngularJS $http Service API Reference -- General Usage

Answer 3

我现在解决了如何重复 JSON 对象数组以显示 HTML 中使用此对象的所有视频：

<div ng-controller="mainController">
  <div ng-repeat="x in videoList">
    <angular-youtube video="x.url">
    </angular-youtube>
  </div>
</div>

这让我能够抓取 $scope.videoList 所在的数据，并从每个数据中提取 url 进行显示。

使用 angularjs 获取 json url 链接 (Youtube) 以显示

Getting json url links (Youtube) to show using angularjs

html

youtube

json

angularjs

angularjs-http