gpt4 book ai didi

javascript - 我的应用程序的打印预览中的 data-ng-hide 行为

转载 作者:行者123 更新时间:2023-11-28 08:09:24 24 4
gpt4 key购买 nike

问题:ng-hide使用了两次:使用text.name.length!text.name.length。在这两种情况下,它们控制的内容在打印预览中可见。为什么?

我的观点

<div>
<div class="content" id="printable">
my name is <b data-ng-hide="text.name.length">__________</b><b data-ng-hide="!text.name.length">{{text.name}}</b>
</div>
<button data-ng-click="printDiv('printable')">print</button>
</div>

这是我的打印预览 Controller ,它向我显示打印页面的打印预览

打印 Controller

app.controller('PrintController', function ($scope) {
$scope.printDiv = function (divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
var popupWin = window.open('', '_blank', 'width=800,height=600');
popupWin.document.open()
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');


popupWin.document.close();
}
})

最佳答案

因为弹出窗口,您已经离开了 angularjs 的领域。

请注意您的代码中如何使用其自己的 html 元素和样式表构建弹出窗口?

    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');

popupWin 中没有任何 Angular 迹象。

此外,您的 Angular 应用程序不仅仅是 DOM 元素。当您将 DOM 复制到弹出窗口时,您是否也复制了 $scope ?没有。

尝试通过移植 DOM 来扩展你的 Angular 应用程序类似于接受一份你的 body 去办公室但你的头留在家里的工作:它根本行不通。

肯定有更好的方法。 Google angularjs 打印预览。您将得到类似 this 的结果.

关于javascript - 我的应用程序的打印预览中的 data-ng-hide 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24462689/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com