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, http://stackoverflow.com/questions/19289402/angular-js-scope-var-value-in-iframe — Chandermani, Mar 30 '15 at 03:45
ng-src="IframeSrcUrl" should be your markup. Since ng-src is an angular specific attribute, it won't require {{}} interpolation — Manish Kr. Shukla, Mar 30 '15 at 04:25

score 5 · Accepted Answer · answered Mar 30 '15 at 04:18

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 '15 at 04:18

squiroid

13,809
6
47
67

@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? – HardikT Nov 14 '16 at 05:58

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

1 Answers1