How to append parameters to iframe src Url in Angular JS?

Question

I have an iframe control in View.

<iframe width="100%" height="800" ng-src="{{IframeSrcUrl}}"></iframe>

In the controller, I have a scope variable like below. But the iframe is not getting the url from scope variable. Also, how do we append additional query string parameters in the controller?

$scope.IframeSrcUrl = 'https://mmr.com';

Thanks!

SCE maybe the reason for this check, stackoverflow.com/questions/19289402/… — Chandermani
– Chandermani, Commented Mar 30, 2015 at 3:45
ng-src="IframeSrcUrl" should be your markup. Since ng-src is an angular specific attribute, it won't require {{}} interpolation — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Mar 30, 2015 at 4:25

squiroid · Accepted Answer · 2015-03-30 04:18:33Z

5

Use $sce service for this for example:-

<iframe width="100%" height="800" ng-src="{{IframeSrcUrl | trustAsResourceUrl}}"></iframe>


app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

answered Mar 30, 2015 at 4:18

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HardikT Over a year ago

@squiroid hey I had the same problem and your answer solved it. But there's one problem though. I have a list of items and on clicking each item, the frame should be opened and the src changes dynamically. But, on clicking the item iframe reloads on its own, which disturbs the iframes opened. What shall I do now?

Collectives™ on Stack Overflow

How to append parameters to iframe src Url in Angular JS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related