javascript - Unable to load url into iframe via AngularJS controller

Question

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!

Answer 1

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!