如何能夠將YouTube鏈接從JSON文件

我JSON文件中像如何能夠將YouTube鏈接從JSON文件

[{"id":"38", "youtube":"https://www.youtube.com/watch?v=PEnuHN-Mqvg"}]

我曾經嘗試的JavaScript像

var str = data[i].youtube; 
var res = str.split("?v="); 
//raplace & is ? 
var str2 = res[1]; 
var res2 = str2.replace("&", "?"); 
//asign iframe to url variable 
var url = "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/"+res2+"\" frameborder=\"0\" allowfullscreen></iframe>"; 
$("#youtube").append(url); //show tag iframe

那麼，怎樣才能在我申請AngularJS PHP？

來源

2015-07-13 Usman

複製的JavaScript到AngularJS控制器？ –

完全不是，只是我的概念兄弟 – Usman

var myApp = angular.module('myApp', []); 

myApp.controller('yourController', function ($scope, testService) { 

    $scope.data = {}; 
    testService.getData().then(data) { 
     $scope.data = data; 
     //loop through data I have direcctly passed 1 array element for eg 
     var str = data[0].youtube; 
     var res = str.split("?v="); 
     //raplace & is ? 
     var str2 = res[1]; 
     var res2 = str2.replace("&", "?"); 
     //asign iframe to url variable 
     $scope.url = "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/"+res2+"\" frameborder=\"0\" allowfullscreen></iframe>";//please use 
    }); 


}); 

myApp.service('yourService', function ($http) { 

    this.getData = function() { 
     return $http.get('data.json'); 
    } 
});

在你的HTML，如果您的div有ID的YouTube，然後（通過這個鏈接FO它https://docs.angularjs.org/api/ng/directive/ngBindHtml）

<div id="youtube" ng-bind-html = "url"></div>

來源

2015-07-13 06:14:35 Ankita

感謝您的支持:) – Usman

首先，我會建議使用正則表達式來獲得從視頻ID YouTube網址。 str.split("?v=");不會在所有情況下工作，因爲一個有效的YouTube視頻網址有任何下列形式：

其次，您需要有一個有效的src和綁定得到的字符串以構建iframe中的HTML標記（代碼嵌入）。像{{<iframe src="..">}}這樣的簡單插值將不起作用。因此，使用NG綁定，HTML

<div ng-bind-html="<iframe src='...'>"></div>

最後，你將需要$sce服務，讓AngularJS結合產生是標記爲安全使用爲背景的值。

<div ng-bind-html="getTrustedHTML('<iframe src=...>')"></div>

哪裏getTrustedHTML()是角度的情況下返回信任HTML功能。

$scope.getTrustedHTML=function(str){ 
     return $sce.trustAsHtml(str); 
    }

這是你的控制器看起來應該像什麼：

app.controller('MainCtrl', function($scope,$sce, yourService) { 
    $scope.name = 'World'; 

    $scope.data = {}; 

    //If you want to get the video links from a JSON 
    yourService.getData().then(function(res){ 
     $scope.data = res.data; 
    }) 

    $scope.postContent = '' 
    /* or directly use $scope.postContent = <youtube URL> 
    */ 

    $scope.parseVideoURL = function(text) { 
     var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig; 
     return text.replace(re, 
      '<iframe height="100%" width="100%" src="http://www.youtube.com/embed/$1" allowfullscreen></iframe>'); 
    }   

    $scope.publishVideo = function(vid){ 
    return $scope.parseVideoURL(vid) 

    } 


    $scope.getTrustedHTML=function(str){ 
     return $sce.trustAsHtml(str); 
    } 
});

和這裏的標記

Enter a Youtube URL. Eg: 'https://www.youtube.com/watch?v=PEnuHN-Mqvg' 
<br><br><br> 
<input type='text' ng-model="postContent" > 
<div ng-bind-html="getTrustedHTML(publishVideo(postContent))"></div> 

<h3>VIDEOS FROM JSON</h3> 
<div ng-repeat="v in data" ng-bind-html="getTrustedHTML(publishVideo(v.youtube))"></div>

工作Plunkr

來源

2015-07-13 06:14:43 nalinc

很高興它的工作。歡呼和歡迎社會:) – nalinc

願上帝保佑你兄弟:) – Usman

如何能夠將YouTube鏈接從JSON文件

回答

相關問題