Javascript 是否有阅读更多/更少文本的基本角度指令

我一直在研究如何制作一个角度指令，如果段落或div的字符数超过一定数量（例如115个），则该指令将缩短段落或div

我还没有找到任何适合我的方法，我已经看到了对一些人有效的方法，但我正在尝试使用angular指令，而不是JQuery

如果有人能提供任何帮助，我将不胜感激，我基本上已经没有想法了

以下是“我的视图”的设置方式：

<div class="Description"
<div class="Content">
    <div data-ng-bind-html="item.Description"></div>
</div>

---

谷歌快速展示了这个软件包，它似乎可以满足你对特定字符限制截断的需求

---

注意：我没有编写/使用该指令，因此无法说明该指令是否正常工作。

如果您只想在某个点截断文本（但不实际更改字符串的值），则可以使用Limito筛选器：

---

我想你要找的是

ng类

。您可以使用它添加和删除基于布尔表达式的类，这基本上就是您使用jQuery实现所做的。例如：

HTML:

您可以结合使用

ng单击

和插值来修改“更多/更少”链接

---

这里有一个显示它工作的小提琴：

可能使用一个自定义过滤器，如这里的答案所示：你想隐藏额外的文本还是删除额外的文本？我想隐藏额外的文本，然后当点击更多的文本时，它会显示剩余的文本是的，我想这样做，但这只是切断了文本，它不会给我任何求助扩展文本点击。这正是我所需要的，我实现了你放在中间的地方，它的工作正好正如我需要它。谢谢你的帮助。我只有一个问题，如果我想让它只在有可以隐藏的文本时显示，我该怎么做？例如，如果有150个字符长的段落，则显示的显示文本将允许您单击。例如，如果有60个字符，文本将不会显示，因为它没有什么可隐藏的。在这种情况下，您可能需要创建自己的指令。指令通常是访问AngularJS中元素的DOM属性的方式。也可能有一些第三方指令专门用于做您想做的事情，但我自己没有使用过。

$(function () {

var maxHeight = 115;
var moretext = Localization.Shared.InstitutionProfileStrings.ShowMore();
var lesstext = Localization.Shared.InstitutionProfileStrings.ShowLess();
$('.__Description').each(function () {
    var content = $(this).find(".__Content");
    var anchor = $(this).find(".morelink");

    if ($(content).height() > maxHeight) {
        $(this).addClass("less");
        $(anchor).html(moretext);
        $(anchor).show();
    }
    else {
        $(anchor).hide();
    }
});
$(".morelink").click(function (e) {
    e.preventDefault();
    var parent = this.parentElement;
    if ($(parent).hasClass("less")) {
        $(parent).removeClass("less");
        $(this).html(lesstext);
        $(parent).addClass("more");
    }
    else if ($(parent).hasClass("more")) {
        $(parent).removeClass("more");
        $(this).html(moretext);
        $(parent).addClass("less");
    }
    return false;
 });
});

{{ fullString | limitTo: 115 }}

<div ng-app="testapp" ng-controller="testctrl">
  <div class="content" ng-class="{ less: hidden }">
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  </div>
  <button ng-click="hidden = !hidden">{{hidden ? 'Show' : 'Hide'}}</button>
</div>

var app = angular.module('testapp', []);
app.controller('testctrl', function ($scope) {
    $scope.hidden = true;
});