使用 AngularJS 和 vimeo 播放器

Question

我正在尝试使用 AngularJS 从 JSON 文件显示 vimeo 播放器。当我运行我的应用程序时，我在控制台中收到了这条消息：

Error: [$interpolate:interr] Can't interpolate: {{videos}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: http://player.vimeo.com/video/xxxxx
http://errors.angularjs.org/1.2.16/$sce/insecurl?p0=http%3A%2F%2Fplayer.vimeo.com%2Fvideo%2Fxxxxx
http://errors.angularjs.org/1.2.16/$interpolate/interr?p0=%7B%7Bvideos%7D%7…insecurl%3Fp0%3Dhttp%253A%252F%252Fplayer.vimeo.com%252Fvideo%252xxxx
    at http://localhost:8000/bower_components/angular/angular.js:78:12
    at $interpolate.fn (http://localhost:8000/bower_components/angular/angular.js:8637:26)
    at attrInterpolatePreLinkFn (http://localhost:8000/bower_components/angular/angular.js:6893:30)
    at nodeLinkFn (http://localhost:8000/bower_components/angular/angular.js:6559:13)
    at compositeLinkFn (http://localhost:8000/bower_components/angular/angular.js:5986:15)
    at compositeLinkFn (http://localhost:8000/bower_components/angular/angular.js:5989:13)
    at publicLinkFn (http://localhost:8000/bower_components/angular/angular.js:5891:30)
    at boundTranscludeFn (http://localhost:8000/bower_components/angular/angular.js:6005:21)
    at controllersBoundTransclude (http://localhost:8000/bower_components/angular/angular.js:6600:18)
    at ngRepeatAction (http://localhost:8000/bower_components/angular/angular.js:20084:15)

我的 HTML：

<div class="videoWrapper" ng-repeat="videos in project.pr_video track by $index">
    <iframe ng-src="{{videos}}" width="560" height="349" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div> 

我不明白如何告诉 Angular Vimeo 是受信任的主机。谁能给我解释一下？

Answer 1

您可以使用$sce.getTrustedResourceUrl() 信任该网址...

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

myApp.controller('myController', ['$scope', '$sce', function ($scope, $sce) {
    $scope.videos = $sce.getTrustedResourceUrl('http://player.vimeo.com/video/xxxxx');
}]);

您可以选择配置 $sceDelegateProvider 以将 URL 列入白名单。