AngularJs未加载外部资源

Question

我正在尝试使用Angular和Phonegap加载位于远程服务器上但遇到问题的视频。在我的JSON中，URL作为纯HTTP URL输入。

"src" : "http://www.somesite.com/myvideo.mp4"

我的影片范本

 <video controls poster="img/poster.png">
       <source ng-src="{{object.src}}" type="video/mp4"/>
 </video>

我所有其他数据都已加载，但是当我查看控制台时，出现以下错误：

Error: [$interpolate:interr] Can't interpolate: {{object.src}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL

我尝试添加$compileProvider配置设置，但没有解决我的问题。

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

Answer 1

这是唯一对我有用的解决方案：

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

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

然后在iframe中：

<iframe class="youtube-player" type="text/html" width="640" height="385"
        ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">
</iframe>