Question

我试图将https://www.youtube.com/embed/与$ctrl.video.id.videoId连接起来，所以我做的是：

 <iframe class="embed-responsive-item" src="{{'https://www.youtube.com/embed/' + $ctrl.video.id.videoId}}" allowFullScreen></iframe>

但这给了我们一个错误：

Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: https://www.youtube.com/embed/OPxeCiy0RdY
http://errors.angularjs.org/1.6.9/$sce/insecurl?p0=https%3A%2F%2Fwww.youtube.com%2Fembed%2FOPxeCiy0RdY
http://errors.angularjs.org/1.6.9/$interpolate/interr?p0=%7B%7B'https%3A%2F%2Fwww.youtube.com%2Fembed%2F'%20%2B%20%24ctrl.video.id.videoId%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20Blocked%20loading%20resource%20from%20url%20not%20allowed%20by%20%24sceDelegate%20policy.%20%20URL%3A%20https%3A%2F%2Fwww.youtube.com%2Fembed%2FOPxeCiy0RdY%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FOPxeCiy0RdY
    at angular.js:116
    at Function.$interpolateMinErr.interr (angular.js:12922)
    at parseStringifyInterceptor (angular.js:13258)
    at Array.regularInterceptedExpression (angular.js:16777)
    at interpolationFn (angular.js:13230)
    at Object.attrInterpolatePreLinkFn (angular.js:10510)
    at angular.js:1383
    at invokeLinkFn (angular.js:10619)
    at nodeLinkFn (angular.js:9985)
    at compositeLinkFn (angular.js:9248)
(anonymous) @ angular.js:14800

搜索某些线程并在堆栈溢出中找到一些可能的解决方案，因此编辑了主模块并在其中放置了一个filterUrl的过滤器函数：

angular.module('video-player', [])
.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
})
.filter('trustUrl', function ($sce) {
    return function(url) {
      return $sce.trustAsResourceUrl(url);
}
});

但仍然没有运气。我不知道是什么导致了这个错误。

Answer 1

您可以使用函数在控制器中生成URL，如下所示

<强>样本

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="videoController">

  <div class="thumbnail">
    <div class="video-container">
      <iframe width="100%" ng-src="{{getIframeSrc(youtubevideo)}}" frameborder="0 " allowfullscreen></iframe>
    </div>
  </div>

</body>

</html>

＆＃13;

{{1}}

＆＃13;

获得角度误差：[$ interpolate：interr]

1 个答案: