CODEWITHSUNDEEP
javascripthtmlangularjsiframecontroller
Elad Noty
Elad Noty

Reputation: 237

Can't load URL into iframe with angularJS

Using AngularJS, Im trying to load the "myLink" URL address to iframe in another html. data.No is the id that i pull from another place and works fine (get the Id that i need for the url)

in the controller - "TransactionsCtrl":

$scope.myLink = "http://"the real url"+ data.No +"&file="+ data.No +"&contract_id="+ data.No;
console.log($scope.myLink);

in the HTML :

<div ng-controller= "TransactionsCtrl">
    <iframe ng-src="{{myLink}}"></iframe>
</div>

and all i get is this : 

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

when i hard coded the url its working fine.

Upvotes: 13

Views: 9062

Answers (3)

Shanid Ameen
Shanid Ameen

Reputation: 1

url: string = 'https://www.youtube.com/embed/dQw4w9WgXcQ'; urlSafe: SafeResourceUrl;

constructor(public sanitizer: DomSanitizer) {}

this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);

Upvotes: 0

saghar.fadaei
saghar.fadaei

Reputation: 3383

It works for me : you can write this in js code as a function 

$scope.trustSrc = function(src) {
  return $sce.trustAsResourceUrl(src);
}
$scope.iframe = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE"};

and use it in your view : 

 <iframe ng-src="{{trustSrc(iframe.src)}}"></iframe>

or you can write it as a filter like : 

.filter('trusted', function($sce){
return function(url) {
    return $sce.trustAsResourceUrl(url);
};

})

and use it in view : 

 <iframe ng-src="{{iframe.src | trusted}}"></iframe>

Upvotes: 9

Michael
Michael

Reputation: 3326

In the controller you should use:

   $scope.myLink =  $sce.trustAsResourceUrl(myUrl)

Upvotes: 25

Related Questions