Question

我已经阅读了有关使用angularjs隐藏和显示长文本的stackoverflow问题。我的问题是我的服务器端文本是以html文本形式返回的，带有hrefs和
标签，或者我可以将其作为Markdown返回，然后在角度客户端进行解析。

问题是如何将文本剪切为短显示版本，如果该文本中有html或markdown标签？

在其中一个答案中，我找到了删除长文本和显示更多/更少链接的指令

https://github.com/kipernicus/angularjs-directive/blob/master/js/directives/expand-text.js

angular.module("answer", []).directive("expandText", function() {
    function truncateWordBounds(full, len) {
        var last = full.substr(len, 1);
        var abbrev = full.substr(0, len);
        if (RegExp(/[A-Za-z]/).test(last)) {
        abbrev = abbrev.replace(/[A-Za-z]+$/, '');
        }
        return {truncated : abbrev, expanded: full.substr(abbrev.length)};
    }
    return {
        restrict: "A",
        templateUrl: "partials/expand-text.html",
        replace: true,
        scope: {
            showMoreLabel: "@showMoreLabel",
            showLessLabel: "@showLessLabel"
        },
        link: function(scope, element, attributes) {
            var maxLength = attributes["maxLength"] || 100;
            scope.text = attributes["text"];
            if(scope.text.length < maxLength) {
                scope.disabled = true; // no need for truncation
            }
            else {
                scope.truncated = true;
                var splitText = truncateWordBounds(scope.text, maxLength);
                scope.text = splitText.truncated;
                scope.expandedText = splitText.expanded;
            }
        }
    }
});

但如果该指令收到html文本，则会抛出错误

Error: String contains an invalid character

并且该指令也可以将html标签分成两部分，并且该文本将被破坏。

所以我的问题分为两部分：

如何在服务器端更好地存储用户输入，输出后会显示href链接和“\ n”，并且可以切换短/长文本
angularjs代码的外观如何，因此它会解析html或markdown来切换短/长文本

修改

我通过使用angular和css解决方案部分解决了扩展/崩溃的问题，这也解决了解析html文本的问题。

.expand-wrapper {
    &.text-expanded {
        .text-container {
            overflow: visible;
            height: auto;
        }
        .btn-text-expand {
            .hidden;
        }
    }
    &.text-hidden {
        .text-container {
            height: 40px;
            overflow: hidden;
        }
        .btn-text-collapse {
            .hidden;
        }
    }
}


<div class="expand-wrapper" ng-class="{ 'text-expanded': show, 'text-hidden': !show }">
    <div class="text-container">
        Long text goes here....            
    </div>
    <button class="btn-text-expand" ng-click="show = true">Show text</button>
    <button class="btn-text-collapse" ng-click="show = false">Hide text</button>
</div>

但是如果文字大小高于40px，我怎么能隐藏“显示按钮”？因为没有什么可以展开

Answer 1

尝试使用textContainer.getBoundingClientRect().height获取文本高度，并将条件绑定到按钮的ng-show属性，或将其直接应用于处理服务器响应的代码中。

Answer 2

为了扩展上面提供的答案，我在这里隐藏了＆＃34; show＆＃34;按钮。我在元素上创建了一个指令，根据元素的高度设置范围属性，并在＆＃34; show＆＃34;上使用它。按钮：

eval

你可以在＆＃34; show＆＃34;上使用这个showMoreButton道具。按钮：

       link: function (scope, element, attrs) {
            scope.getElementDimensions = function () {
                return { 'ht': element.height() };
            };

            scope.$watch(
                scope.getElementDimensions,
                function (newValue, oldValue) {
                    if (newValue.ht > 40) {
                        scope.showMoreButton = true;
                    }
                },
                true
            );

            element.bind('load', function () {
                scope.$apply();
            });
        }

如果文本格式为html，则使用angularjs显示更少/更多文本

2 个答案: