angularjs $ компилирует ошибки onload event на iframe

Я пытаюсь создать поставщика печати, который получает шаблон и область и компилирует его в html, чем вводит iframe с этим содержимым html в теге body и вызывает печать на onload событие iframe для печати этого содержимого. код выглядит следующим образом:

myApp.provider('$print', function() { 
    return { 
     $get: function($document, $interpolate, $compile, $timeout) { 
      var $print = {}; 

      function printFrame(content) { 
       var frameContent = '<!doctype html>' + 
        '<html>' + 
        '<body onload="window.print()">' + 
         content + 
        '</body>' + 
        '</html>'; 

       // inject iframe into DOM 
       var iframe = document.createElement("IFRAME"); 
       iframe.id = 'print-frame'; 
       iframe.style.display = 'none'; 

       var body = $document.find('body').eq(0); 
       body.append(iframe); 
       iframe = document.getElementById('print-frame'); 

       // fill iframe with print content 
       var iframeContent = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument; 
       iframeContent.document.open(); 
       iframeContent.document.write(frameContent); 
       iframeContent.document.close(); 
      }; 

      $print.iframe1 = function(printOptions) { 
       var printScope = printOptions.scope.$new(); 
       var htmlToPrint = $interpolate(printOptions.template)(printScope); 
       printFrame(htmlToPrint); 
      } 

      $print.iframe2 = function(printOptions) { 
       var printScope = printOptions.scope.$new(); 
       $timeout(function() { 
        var htmlToPrint = $compile(printOptions.template)(printScope); 
        printScope.$digest(); 
        printFrame(htmlToPrint.html()); 
       }); 
      } 

      return $print; 
     } 
    } 
});

вопрос я имею, когда я использую $interpolate, например, провайдер работает отлично, событие IFrame onload ждет, пока изображение и все загружается перед вызовом печати, но когда я использую $compile, по какой-либо причине событие iframe onload срабатывает перед загрузкой изображений.

Я создал JSFiddle для этого примера, если вы отключите кеш, вы можете увидеть, как на интерполировать, печать вызывается только после загрузки большого изображения, но при компиляции сообщение печати открывается сразу.

Надеюсь, кто-то может мне помочь, спасибо, Даниэль!

http://jsfiddle.net/HB7LU/16737/

источник

2015-08-24 Pacuraru Daniel

htmlToPrint имеет два элемента h1 & другой является img тег, но проблема в том, когда вы делаете htmlToPrint.html() от функции iframe2 она только возвращает SuperHero, он не возвращает другую часть html.

Для решения этой проблемы вы можете использовать оболочку вашего шаблона с некоторым div, так что при выполнении .html() на элементе будут возвращены правильные элементы.

Шаблон

template: '<div>'+ 
      '<h1>{{printTitle}}</h1>'+ 
      '<img style="width: 1000px" src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg"'>+' 
      '<div>',

Кроме того, вы должны установить некоторое небольшое количество тайм-аут в миллисекундах, как 10 внутри функции $timeout.

$timeout(function() { 
    printFrame(htmlToPrint.html()); 
},10);

Working Fiddle

Update

Выше решение не работает, если я для отключения кэша браузера, я думаю, что мы посылаем страницу печати перед выводом изображения на странице.

$print.iframe2 = function(printOptions, scope) { 
    var printScope = printOptions.scope.$new(); 
    var htmlToPrint = $compile(printOptions.template)(printScope); 

    angular.element(htmlToPrint.find('img').on('load', function() { 
     $timeout(function() { 

      console.log("Img loaded") 
      printFrame(htmlToPrint.html()); 
     }); 
    })) 

}

Updated Fiddle

источник

2015-08-24 20:31:30

Вы правы, я обновил свой JSFiddle, но это не устраняет проблему, которую я имею, то компиляционная печать по-прежнему открывает черновик печати до загрузки изображения, поэтому печать не имеет изображения внутри –

@PacuraruDaniel посмотри на мое редактирование..подумай о своей проблеме..Спасибо :) –

@PankajParkar Я думаю, что таймаут 0 должен быть в порядке (так что $ digest заканчивается). –

Я нашел вопрос об этом, проблема в том, что, когда я компиляции HTML, изображения начинают загружать и получать кэшируются браузером, и когда я впрыснуть их внутри iframe, событие onload на iframe считает, что они уже загружены и не ждут их.

источник

2015-08-25 09:00:37

angularjs $ компилирует ошибки onload event на iframe

ответ

Смежные вопросы