如果文本格式化为 html,则使用 angularjs 显示更少/更多的文本
Show less/more text with angularjs if text is formatted as html
我已经阅读了有关使用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>
- 为什么在页面上单击的先前链接的文本显示在 AJAX 请求中
- JavaScript NaN错误,输入文本显示为NaN
- 关于socket.io实时文本显示的问题
- 如何使用javascript使文本显示在文本字段中
- 在它们之间切换时,jQuery 文本显示在活动文本下方
- 使用 ajax 乱码文本显示图像
- 带有文本显示js功能的图像映射 - 某些部分不显示
- 来自 Ajax 请求的文本显示不正确
- 如何使用 JavaScript 使文本显示
- 是否可以将元素内部的文本显示在 ::在 css 之前
- on更改文本框的文本显示在另一个文本框上
- 在文本显示在Scroll上之前在页面上隐藏文本的问题
- 使用带文本显示的Jquery切换文本
- 如何使文本显示速度变慢
- 如何将图片添加到点击计数器文本显示<图像><点击量>
- 文本显示有延迟
- 根据在另一个文本框中输入的文本显示文本框中的文本
- 如何从点击文本显示文件浏览器,并在悬停文本时将鼠标光标更改为指针
- 使文本显示为几行可点击的线条
- 如何使文本显示