打印被 Angular 过滤器截断的字符串答案

【问题标题】：Printing string that was truncated by Angular filter打印被 Angular 过滤器截断的字符串
【发布时间】：2015-09-16 16:06:24
【问题描述】：

在我的 Angular 应用程序中，我构建了一个视图，其特定目的是以打印机友好的方式显示数据。

但是，我还添加了使用 Angular filter 显示更多/更少文本的选项，该选项将 strings 剪切为预定义的字符数，并让用户通过单击按钮查看其余部分，如下所示:{{elem | cut:!show[$index]:true:max}}.

这是完整的过滤器：

angular.module('pear').filter('cut', function () {
    return function (value, enabled, wordwise, max, tail) {

        if (!value) return '';
        max = parseInt(max, 10);
        if (!max) return value;
        if(!enabled) return value;
        if (value.length <= max) return value;

        value = value.toString().substr(0, max);
        if (wordwise) {
            var lastspace = value.lastIndexOf(' ');
            if (lastspace != -1) {
                value = value.substr(0, lastspace);
            }
        }

        return value + (tail || '...');
    };
});

这就是它最终的样子：

有没有办法为打印视图禁用此filter，或者以某种方式强制使用@media print 的css 条件来显示全文？

作为参考，这是我目前在模板中使用过滤器的方式，以防需要不同的标记方法：

<div class="content"> {{elem | cut:!show[$index]:true:max}}
    <span ng-show="!show[$index] && elem.length > max" class="show-more" ng-click="toggleShow($index)">more</span>
    <span ng-show="show[$index]" class="show-more no-print" ng-click="toggleShow($index)">less</span>
</div>

【问题讨论】：

为什么不添加第二个来显示未截断的字符串并为其分配一些@media print css？
@Trike 是的，这可能是最好的，如果不是唯一的方法。

标签： javascript css angularjs printing

【解决方案1】：

查看工作演示：JSFiddle。

将以下代码添加到您的控制器。逻辑是：在打印之前，禁用过滤器。并在打印后重新启用它。使用window.matchMedia 检测是否正在打印。

注意：注意浏览器兼容性（IE>=10、Opera>=12.1等）

这种解决方案的优点是：你可以控制视图不仅仅是通过CSS。实际上，您可以设计您的视图专门用于打印。当然，打印后需要恢复之前的状态。

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
        $scope.$apply(function () {
            var isPrinting = mql.matches;
            $scope.enabled = !isPrinting;
        });
    });
}

【讨论】：

啊！这好多了，我并没有真正享受我的 html 中的额外混乱。谢谢！

【解决方案2】：

我最终在我的sass 文件中使用了@media print，并创建了几个类来帮助我在我认为合适的时候强制隐藏或显示特定元素，如下所示：

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
    .force-print, .force-print * {
        display: block !important;
    }
    html, body, .main-content {
        margin: 0;
        padding: 0;
        width: 100%;
    }
}

我通过创建两个<span> 元素在我的模板中使用它们，一个具有.no-print 类，其中包括截断的字符串，另一个具有.force-print 和hidden 类，其中包括没有任何过滤器的元素。

<div class="content">
    <span class="no-print">{{elem | cut:!show[$index]:true:max}}</span>
    <span class="hidden force-print">{{elem}}</span>
</div>

打印时，.force-print 将覆盖 Bootstrap 的 hidden 类，显示用户不可见的元素。

【讨论】：