Question

我的数据库中有一个网址视频链接（http://www.youtube.com/watch?v=myvideoid），我希望使用angular嵌入到i框架中。

我已尝试过下面的代码，但它无效

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

其中{{v_link}}是在mysql数据库中存储视频的列。任何帮助，请

Answer 1

使用$sce，您可以将所需的网址设为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="angular.js@1.4.x" 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>

Answer 2

您收到的错误是$interpolate:noconcat。它声明：

Strict Contextual Escaping禁止在需要可信值时连接多个表达式的插值。 Source

这意味着您必须使用$sce并将所需的网址标记为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 }}"。

如何使用angularjs在iframe中嵌入数据库中的视频链接

2 个答案: