我正在尝试使用AngularJS从具有视频对象的json文件中获取数据。但是，我只能根据其他资源/引用来弄清楚如何采用一个特定的URL并使用$ 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>
最佳答案
显示了代码中的几个问题。
在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
关于html - 获取json网址链接(Youtube)以使用angularjs显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41212108/