不被AngularJs加载的外部资源-ExternalresourcenotbeingloadedbyAngularJs

251  

This is the only solution that worked for me:

这是唯一对我有效的解决方案:

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

Then in an iframe:

然后在iframe:

2  

I ran into the same problem using Videogular. I was getting the following when using ng-src:

我在使用视频游戏时遇到了同样的问题。在使用ng-src时，我得到以下信息:

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

I fixed the problem by writing a basic directive:

我写了一个基本的指示来解决这个问题:

angular.module('app').directive('dynamicUrl', function () {
return {
  restrict: 'A',
  link: function postLink(scope, element, attrs) {
    element.attr('src', scope.content.fullUrl);
  }
};
});

The html:

html:

2  

If anybody is looking for a TypeScript solution:

如果有人在寻找打字稿解决方案:

.ts file (change variables where applicable):

.ts文件(如适用，变更变量):

module App.Filters {

    export class trustedResource {

        static $inject:string[] = ['$sce'];

        static filter($sce:ng.ISCEService) {
            return (value) => {
                return $sce.trustAsResourceUrl(value)
            };
        }
    }
}
filters.filter('trustedResource', App.Filters.trusted.filter);

Html:

Html:

1  

Based on the error message, your problem seems to be related to interpolation (typically your expression {{}}), not to a cross-domain issue. Basically ng-src="{{object.src}}" sucks.

基于错误消息，您的问题似乎与插值(通常是表达式{{})有关，而不是跨域问题。基本上ng-src = " { {对象。src } }“糟透了。

ng-src was designed with img tag in mind IMO. It might not be appropriate for . See http://docs.angularjs.org/api/ng.directive:ngSrc

ng-src设计时考虑了img标签。它可能不适用于 <源> 。见http://docs.angularjs.org/api/ng.directive:ngSrc

If you declare , it will be working, right? (note that I remove ng-src in favor of src) If not it must be fixed first.

查封，它会工作，对吗?(注意，我以src的名义移除ng-src)如果不是，必须先修复它。

Then ensure that {{object.src}} returns the expected value (outside of ):

然后确保{ {对象。src}返回期望值(

{{object.src}}

If it returns the expected value, the following statement should be working:

如果返回期望值，则应使用以下语句:

 //src instead of ng-src

0  

I had this error in tests, the directive templateUrl wasn't trusted, but only for the spec, so I added the template directory:

我在测试中有这个错误，指令templateUrl不受信任，但只是为了规范，所以我添加了模板目录:

beforeEach(angular.mock.module('app.templates'));

My main directory is app.

我的主目录是app。