javascript - 打印被 Angular 过滤器 chop 的字符串

Question

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

但是，我还添加了显示更多/更少文本的选项，它使用 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 || '...');
    };
});

这就是它最终的样子:

有没有办法为打印 View 禁用此过滤器，或者以某种方式强制使用 @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>

Answer 1

检查工作演示:JSFiddle .

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

Note: be careful about the browser compatibility (IE>=10, Opera>=12.1, etc.)

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

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