Question

我正在尝试使用AngularJS从具有视频对象的json文件中获取数据。但是，我只能根据其他资源/参考资料找出如何获取一个特定网址并使用$ sce将其连接到http://youtube.com/embed/链接。我希望能够存储json文件中多个视频的链接，并能够获取这些链接并将其插入到下面提供的文本中。我希望能够在底部代码集的$ 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以防止在网址不可用时出现错误请求

要访问$ 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 promise返回一个响应对象：

$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中使用它来显示所有视频：

＆＃13;

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

＆＃13;

这允许我获取$ scope.videoList所在的数据，并从每个URL中提取URL以显示。

获取json url链接（Youtube）以使用angularjs显示

3 个答案: