Angular : src attribute bug in Iframe directive

Question

I'm having a problem with a Iframe directive that I try to implement.

As far I am : Template:

<div class="externalIframe" iframe-src="external.html"></div>

Directive :

angular.module('project.directives', [])
   .directive('externalIframe', ['$rootScope', function($rootScope) {
      return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: {
          src: '@iframeSrc', // the src uses the data-binding from the parent scope
        },
        template: '<iframe src="{{src}}" height="100%" width="100%" frameborder="0"></iframe>',
        link: function(scope, elem, attrs) {
          //elem.src = "dummy.html"; // not working either
        }
      }
    }])

Problem : It fires 2 HTTP request (2 iframe loading). :

one to http://localhost:8000/app/{{src}} (iframe src not yet interpreated by angular)
one to http://localhost:8000/app/external.html (iframe src once interpreated by angular)

I want to avoid the useless first call.. How can I do that ?

I tried without src in the template and programmatically set it in the link or compile function but that doesn't fire the iframe loading.

edit: jsFiddle added for bug demo with compile method => you'll see in the network tab of firebug/chrome dev panel that two request are made :

http://fiddle.jshell.net/_display/%7B%7Bsrc%7D%7D
http://fiddle.jshell.net/_display/external.html

Thanks for the help

markmarijnissen · Accepted Answer · 2014-01-17 10:49:05Z

8

You do not need a directive for this. Use ng-src on an actual iframe element. See the docs on ng-src.

<iframe ng-src="external.html"></iframe>

answered Jan 17, 2014 at 10:49

markmarijnissen

5,9372 gold badges31 silver badges34 bronze badges

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

4 Comments

Fabio Nolasco Over a year ago

Sure. You can do that. But it didn't solve the issue mentioned.

markmarijnissen Over a year ago

Can you explain to me: what did I miss? What is the difference with the mentioned issue? If you want a directive with an iframe, you can still use ng-src?

Jeremy Thille Over a year ago

Using ng-src worked like a charm and made the two HTTP errors from the start disappear. I think the answer corresponds perfectly to the question.

Karanvir Kang Over a year ago

Be careful with this, their is a bug in current ng-src implementation: github.com/angular/angular.js/issues/9843

tdakhla · Accepted Answer · 2013-08-21 13:39:13Z

5

Removing src from the iframe in the template and simply changing the attribute in the link function (via element.attr()) works:

return {
    restrict: 'E',
    require: '?ngModel',
    replace: true,
    transclude: true,
    template: '<iframe height="100%" width="100%" frameborder="0"></iframe>',
    link: function (scope, element, attrs) {
        element.attr('src', attrs.iframeSrc);
    }
};

Fiddle: http://jsfiddle.net/5rYrw/

answered Aug 21, 2013 at 13:39

tdakhla

6604 silver badges4 bronze badges

1 Comment

Jscti Over a year ago

Thanks for that, the element.attr( part was usefull.

leon.io · Accepted Answer · 2013-08-21 13:07:27Z

1

Instead of using 'link' use the 'compile' function, as you're essentially wanting to modify the HTML before insertion into the DOM. I think 'link' is inserted, and then bound to the scope.

So with link 1. compile is called with {{url}} - request by iframe is made 2. link is called, and {{url}} is replaced, hence you second call.

If you use 'compile' you can modify the src attribute yourself.

Give http://docs.angularjs.org/guide/directive a look over, hope this helps

Edit Check this fiddle http://jsfiddle.net/jbSx6/20/

return {
    restrict: 'E',
    require: '?ngModel',
    replace: true,
    transclude: true,
    template: '<iframe src="%url%" height="100%" width="100%" frameborder="0"></iframe>',
    compile: function (element, attrs, transclude) {
        console.log(element[0].outerHTML);
        element[0].outerHTML = element[0].outerHTML.replace('%url%',attrs.iframeSrc);
        console.log(element);
    }
};

<div ng-app="myApp">
   <div>display google in frame</div>
   <my-frame data-iframe-src="http://jsfiddle.net">test</my-frame>
</div>

edited Aug 21, 2013 at 13:07

answered Aug 21, 2013 at 10:29

leon.io

2,8341 gold badge20 silver badges26 bronze badges

3 Comments

Jscti Over a year ago

Hi thanks for your help, but I tried it without success. See my edit/jsfiddle for the details.

leon.io Over a year ago

Hi Bixi - it does work, in that fiddle you were still using the link function, not compile. Please see my edit.

Colton McCormack Over a year ago

This is definitely the "Angular way" of solving the problem. Good answer.

Collectives™ on Stack Overflow

Angular : src attribute bug in Iframe directive

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related