Question

我正在制作一个指令来打印带有范围数据的视图teamplate。我的问题是iframe，我没有编译它。模板注入iframe但$ compile不绑定范围数据。

我的代码

angular.module('app').directive('printable', ['$templateCache', '$compile', function ($templateCache, $compile) {
return {
    restrict: 'EAC',
    scope: true,
    link: function (scope, element, attrs) {
        var iframe;
        var html = $templateCache.get(attrs.printView);
        var elm = document.createElement('iframe');

        elm.setAttribute('class', 'print-frame');
        elm.setAttribute('style', 'display: none;');

        element.parent().append(elm);

        iframe = element.parent().find('.print-frame')[0];

        var compiled = $compile(html);
        write(html);

        function write(value) {
            var doc;
            if (iframe.contentDocument) { // DOM
                doc = iframe.contentDocument;
            } else if (iframe.contentWindow) { // IE win
                doc = iframe.contentWindow.document;
            } else {
                alert('Wonder what browser this is... ' + navigator.userAgent);
            }

            doc.write(value);
            doc.close();
        }

        element.bind('click', function (event) {
            if (window.navigator.userAgent.indexOf("MSIE") > 0) {
                iframe.contentWindow.document.execCommand('print', false, null);
            } else {
                iframe.contentWindow.focus();
                iframe.contentWindow.print();
            }
        });
    }
};
}]);

提前致谢。

Answer 1

试试这个

 var  compiled = $compile(html)(scope);

AngularJS $将模板编译成iframe并打印出来

1 个答案: