Angular: src attribute error in Iframe directive

Question

I have a problem with the Iframe directive that I am trying to implement.

As far as I know: 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 starts 2 HTTP requests (2 iframe downloads).

• one to http://localhost:8000/app/{{src}} (iframe src is not yet interpreted by angular)
• one to http://localhost:8000/app/external.html (iframe src after interpreting angular)

I want to avoid a useless first call .. How can I do this?

I tried without src in the template and installed it programmatically in the link or compilation function, but this did not work when the iframe loaded.

edit: jsFiddle is added to demonstrate errors using the compilation method => you will see two requests on the network tab of the firebug / chrome dev panel:

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

thanks for the help

Answer 1

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

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

Answer 2

Removing src from the iframe in the template and just 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); } }; 

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

Answer 3

Instead of using 'link', use the 'compile' function, since you essentially want to change the HTML before embedding in the DOM. I think a “link” is inserted and then attached to the area.

So, with link 1. compilation is called from {{url}} - the iframe request is executed 2. the link is called, and {{url}} is replaced, so you are the second call.

If you use "compilation", you can change the src attribute yourself.

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

Edit Check out this script 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>