我已经阅读了有关使用angularjs隐藏和显示长文本的stackoverflow问题。我的问题是我从服务器端的文本以 html 文本的形式返回，带有 hrefs 和
标签，或者我可以将其返回为 Markdown，然后在角度客户端进行解析。
问题是如何将文本剪切到简短的显示版本，如果该文本中有 html 或 markdown 标签？
在其中一个答案中，我发现了一个剪切长文本并显示更多/更少链接的指令
https://github.com/kipernicus/angularjs-directive/blob/master/js/directives/expand-text.js
angular.module("answerswer", []).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链接和"'"，并且可以切换短/长文本版本
angularjs代码的样子，所以它会解析html或markdown来切换短/长文本版本
编辑：
我通过使用角度和 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，我如何隐藏"显示按钮"？ 因为没有什么可以扩展的
尝试使用 textContainer.getBoundingClientRect().height 获取文本高度，并将条件绑定到按钮的 ng-show 属性，或直接在处理服务器响应的代码中应用它。
为了扩展上面提供的答案，这是我隐藏"显示"按钮所做的。我在元素上创建了一个指令，以根据该元素的高度设置范围属性，并将其用于"显示"按钮：
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();
});
}
您可以在"显示"按钮上使用此showMoreButton道具：
<button class="btn-text-expand" ng-click="show = true" ng-show="showMoreButton">Show text</button>