Angular: błąd atrybutu src w dyrektywie Iframe

Question

Mam problem z dyrektywą iframe, którą próbuję zaimplementować.

Jak daleko jestem: Szablon:

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

dyrektywa:

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: Strzela 2 żądania HTTP (2 iframe ładowanie). :

• jeden do http://localhost:8000/app/{{src}} (iframe src jeszcze interpreated przez kanciasty)
• jeden do http://localhost:8000/app/external.html (iframe src raz interpreated przez kanciasty)

Chcę uniknąć niepotrzebnego pierwsze połączenie .. Jak czy mogę to zrobić ?

Próbowałem bez src w szablonie i programowo ustawiłem go w funkcji łącza lub kompilacji, ale to nie uruchamia ładowania elementu iframe.

edit: jsFiddle dodany do demo błędów metodą kompilacji => zobaczysz na karcie sieciowej Firebug/Chrome panelu dev że dwa żądania są wykonane:

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

Dzięki za pomoc

Answer 1

Nie potrzebujesz do tego dyrektywy. Użyj ng-src na rzeczywistym elemencie iframe. Zobacz docs on ng-src.

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

Answer 2

Zamiast używać "łącza", użyj funkcji "kompilacji", ponieważ zasadniczo chcesz zmodyfikować kod HTML przed wstawieniem go do DOM. Myślę, że "link" jest wstawiany, a następnie związany z zakresem.

Więc z linkiem 1. kompilacji jest wywoływana z {{url}} - wniosek iframe jest wykonany 2. Link nazywa i {{url}} jest wymieniane, stąd ty drugie połączenie.

Jeśli używasz "kompilacji", możesz samodzielnie zmodyfikować atrybut src.

Daj http://docs.angularjs.org/guide/directive spojrzeć na nadzieję, że to pomaga

Edycja Sprawdź to skrzypce 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

Usuwanie SRC z iframe w szablonie i po prostu zmieniając atrybut w funkcji Link (via element.attr()) działa:

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/