出现 Angular 错误：[$interpolate:interr]答案

【问题标题】：Getting Angular error: [$interpolate:interr]出现 Angular 错误：[$interpolate:interr]
【发布时间】：2018-02-12 00:56:02
【问题描述】：

我试图将 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

在一些线程上搜索，发现堆栈溢出的一些可能解决方案，因此编辑主模块并在其中为 trustUrl 放置一个过滤函数：

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);
}
});

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

【问题讨论】：

您是否将过滤器添加到您的 HTML 代码中？您必须在要信任的文本之后添加| trustUrl，如here 所述，我假设您从中获取了代码。如果您从帖子中复制代码，则应始终链接回帖子。见meta.stackexchange.com/q/126414/194720 和meta.stackoverflow.com/q/316496/215552
@MikeMcCaughanL：我确实做到了。但还是不行。

标签： angularjs

【解决方案1】：

你可以有一个函数在控制器中生成url，如下所示，

演示

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

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

app.controller('videoController', ['$scope',
  function MyCtrl($scope) {

   $scope.youtubevideo="https://www.youtube.com/embed/c-z9M6KZs_0";

    $scope.getIframeSrc = function(src) {
      return  src;
    };
  }
]);

<!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>

【讨论】：

问题在于代码 sn-p 运行器，请查看此处plnkr.co/edit/CqBEu6iyWpNhwoI08Mtv?p=preview