CODEWITHSUNDEEP
javascriptangularjsiframe
elewinso
elewinso

Reputation: 2521

ng-src does not update iframe on url parameter change

I have the following in my view:

<iframe style="width: 100%;height: 240px;" scrolling="no" frameborder="0" ng-src="{{previewUrl}}">
</iframe>

and I use the following code to set previewUrl

$scope.previewUrl = test ? '/foo/bar/' : '/foo/bar/?test=1';

Test is changed elsewhere during the lifetime of my angular app and I want the iframe's source to update accordingly.

It seems, that because the only difference is in a URL parameter the change is being ignored by angular.

If I change the code to this:

$scope.previewUrl = test ? '/foo/bar/' : '/foo/bar/baz/';

everything works.

Is this a bug in angularjs or am I missing something? I am using angular version 1.2.5

Upvotes: 0

Views: 587

Answers (2)

Jaldhi Oza
Jaldhi Oza

Reputation: 92

Use "$sce" service to resolve your issue as below.

// in Controller 

app.controller('TestWorkController', function ($scope, $sce) { 
$scope.previewUrl = $sce.trustAsResourceUrl(true ? 'http://clips.vorwaerts-gmbh.de/VfE.webm' : 'http://www.quirksmode.org/html5/videos/big_buck_bunny.webm');
});

//View
  <iframe style="width: 100%;height: 240px;" scrolling="no" frameborder="0" ng-src="{{previewUrl}}"></iframe>

Upvotes: 1

David R
David R

Reputation: 15639

I guess you may need to use the $sce.trustAsResourceUrl to make it work.

Based on your example, the change you need to do is, 

$scope.previewUrl = $sce.trustAsResourceUrl(test ? '/foo/bar/' : '/foo/bar/baz/');

HTH

Upvotes: 1

Related Questions