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配置为白名单列表。

将AngularJS与vimeo Player一起使用

1 个答案: