Угловая: ошибка атрибута src в директиве Iframe

Question

У меня возникла проблема с директивой Iframe, которую я пытаюсь реализовать.

Насколько я: Шаблон:

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

Директива:

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 
     } 
     } 
    }]) 

Проблема: выстреливает 2 HTTP запрос (2 IFrame загрузки). :

• один к http://localhost:8000/app/{{src}} (IFrame ЦСИ еще не interpreated на угловой)
• один к http://localhost:8000/app/external.html (IFrame ЦСИ раз interpreated угловыми)

Я хочу, чтобы избежать бесполезного первый звонок .. Как Я могу это сделать ?

Я пробовал без src в шаблоне и программно устанавливал его в функции ссылки или компиляции, но это не срабатывало при загрузке iframe.

редактировать: jsFiddle добавлена ​​ошибка демо методом компиляции => вы увидите в вкладке Сеть Firebug/хромированной Dev панели, два запроса сделаны:

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

Спасибо за помощь

Answer 1

Вам не нужна директива для этого. Используйте ng-src на фактическом iframe. См. docs on ng-src.

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

Answer 2

Вместо использования 'link' используйте функцию 'compile', поскольку вы по существу хотите изменить HTML перед вставкой в ​​DOM. Я думаю, что «ссылка» вставлена, а затем привязана к области.

Так со ссылкой 1. компилируемому вызывается с {{URL}} - запрос на IFRAME производится 2. Зацепление называется, и {{URL}} заменяется, следовательно, вы второй вызов.

Если вы используете 'compile', вы можете самостоятельно изменить атрибут src.

Дайте http://docs.angularjs.org/guide/directive взгляд более, надеюсь, что это помогает

Редактировать Проверить эту скрипку 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> 

Answer 3

Удаление SRC из фрейма в шаблоне и просто изменив атрибут в функции связи (через element.attr()):

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/