Can't load URL into iframe with angularJS

Question

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.

Spotty

Answer 1

In the controller you should use:

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

Extensor

This is good if you have one url or a set of urls.. not so good if you need to pass them in dynamically as you have to set them in the controller as opposed to being passed as a var. While this is correct. The answer below from saghar.fadaei is the solution to use. – Stanley

Answer 2

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>

Scribbler

Answer 3

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

constructor(public sanitizer: DomSanitizer) {}

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

Fortalice

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Orabelle