如何在iframe中使用angularjs嵌入數據庫中的視頻鏈接

我有一個來自我的數據庫的url視頻鏈接（http://www.youtube.com/watch?v=myvideoid），我想用角度嵌入到i框架中。如何在iframe中使用angularjs嵌入數據庫中的視頻鏈接

我曾嘗試下面的代碼，但它不工作

<iframe width="200" height="300" ng-src="http://www.youtube.com/embed/{{v_link}}" frameborder="0" allowfullscreen></iframe>

其中{{v_link}}是存儲在MySQL數據庫中的視頻柱。任何幫助，請

來源

2016-05-15 nackolysis

「不工作」是什麼意思？ – Claies

隨着$sce可以使所需的URL爲trusted：

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

 
app.controller('MainCtrl', function($scope) { 
 
    
 
}); 
 

 
app.filter('trustUrl', function($sce) { 
 
    return function(url) { 
 
    return $sce.trustAsResourceUrl(url); 
 
    }; 
 
}); 
 

 
app.directive('youtubePlayer', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     header: '@', 
 
     video: '@' 
 
    }, 
 
    transclude: true, 
 
    replace: true, 
 
    template: '<iframe ng-src="{{video | trustUrl}}"></iframe>', 
 
    link: function(scope, element, attrs) { 
 
     scope.header = attrs.header; 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS App</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <youtube-player video="https://www.youtube.com/embed/ZzlgJ-SfKYE" header="Url Description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </youtube-player> 
 
    </body> 
 

 
</html>

來源

2016-05-15 22:04:45

的錯誤，你得到的是$interpolate:noconcat。它規定：

嚴格上下文轉義不允許在需要信任值時連接多個表達式的插值。 Source。

這意味着您必須使用$sce並將所需的URL標記爲trusted。 這將解決您的問題：

angular 
 
    .module('myApp', []) 
 
    .controller('MainCtrl', function($sce) { 
 
    this.youtubeLink = $sce.trustAsResourceUrl('https://www.youtube.com/embed/N4ony2r0QFs'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MainCtrl as vm"> 
 
    <iframe width="560" height="315" ng-src="{{ vm.youtubeLink }}" frameborder="0" allowfullscreen></iframe> 
 
</div>

另一種方式，如this answer表示，將創造出專門建立信任YouTube網址自定義過濾器：

.filter('youtubeEmbedUrl', function ($sce) { 
    return function(videoId) { 
    return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + videoId); 
    }; 
});

您可以隨時使用此過濾器來嵌入視頻，例如：ng-src="{{ vm.youtubeLink | youtubeEmbedUrl }}"。

來源

2016-05-15 22:31:52

Cosmin Ababei，第一個代碼在運行時不顯示任何視頻 – nackolysis

@CosminAbabei短小而且工作！ +1 –

如何在iframe中使用angularjs嵌入數據庫中的視頻鏈接

回答

相關問題