CODEWITHSUNDEEP
javascriptangularjs
user3284007
user3284007

Reputation: 1717

Unable to load url into iframe via AngularJS controller

I'm trying to dynamically load a URL into an iframe via AngularJS. For some reason, I cannot as shown in this fiddle. Can someone please tell me what I'm doing wrong? Why can't I bind to a URL set in my controller? The code is pretty small:

<div ng-app ng-controller="LoginController">
    <div>Trying to load {{ customUrl }}</div>
    <div><iframe ng-src="{{trustSrc(customUrl)}}" height="480" width="640"></iframe></div>
</div>

function LoginController($scope) {
    $scope.customUrl = 'http://www.google.com/custom';
}

Thank you!

Upvotes: 3

Views: 3636

Answers (1)

drew_w
drew_w

Reputation: 10430

The reason that your code isn't working is because the source isn't trusted. In order to get the source to be trusted, you need to use the $sce service as recommended in this post. If you do that you end up with the following:

Html

<div><iframe ng-src="{{customUrl}}" height="480" width="640"></iframe></div>

Controller

function LoginController($scope, $sce) {
    $scope.customUrl = $sce.trustAsResourceUrl('http://www.cnn.com');   
}

See the updated fiddle: http://jsfiddle.net/W4WyL/4/

Edit - My original answer said to remove the curly braces. This was completely incorrect. The curly braces are required in ng-src in order to have the url actually be evaluated. The reason this seemed to work is because code that is part of the template is implicitly trusted while variables are not. That said, the url was absolutely not valid - it just tried to load the name of the variable inside of the current page. Hopefully this will help others in the future that try removing the curly braces!

Upvotes: 10

Related Questions