使用show less/more选项截断多行HTML绑定

Question

我对这个问题有类似的问题.这个解决方案的问题是jquery.autoellipsis减慢了我的应用程序,还需要更改才能添加更多/更少的功能.

就我而言,我越来越动态内容的HTML代码NG绑定,HTML在NG-重复.

  <ion-item ng-repeat="page in pages">
     <div ng-bind-html="page.extract" class="item item-text-wrap"></div>
  </ion-item>

我想有一个指令,在X像素(高度)或Y行之后截断html代码,并且还有更多/更少的选项视图,以防有内容显示.

我发现的大多数解决方案仅用于纯文本或需要其他插件,如更多.

谢谢.

Answer 1

在测试了一些可用的Jquery插件之后,这是最有效的插件:Trunk8

原因:

1. 加载更快.
2. 使用普通测试和HTML(没有那么多代码).
3. Costumization可以在Directive中完成.

脚步:

1. 下载Trunk8
2. 添加对jQuery和插件的访问:trunk8.js
3. 创建指令(见下文)
4. 添加对指令的访问权限(如有必要)
5. 从app.js访问modude:var app = angular.module('app',['ellipsis'])
6. 从您的角度来看指令.

指示:

angular.module( 'ellipsis', [])
    .directive('ellipsis', [function () {
    return {
        required: 'ngBindHtml',
        restrict: 'A',
        priority: 100,
        link: function ($scope, element, attrs, ctrl) {
            $scope.hasEllipsis = false;
            $scope.$watch(element.html(), function(value) {
               if (!$scope.hasEllipsis) {
                   // apply this code ONCE
                   $scope.hasEllipsis = true;
                   $(element).trunk8({
                        fill: '&hellip; <a id="read-more" href="#">read more</a>', /*(Default: '&hellip;') The string to insert in place of the omitted text. This value may include HTML.*/
                        lines: 3, /*(Default: 1) The number of lines of text-wrap to tolerate before truncating. This value must be an integer greater than or equal to 1.*/
                        //side: 'right', /*(Default: 'right') The side of the text from which to truncate. Valid values include 'center', 'left', and 'right'.*/
                        tooltip: false, /*(Default: true) When true, the title attribute of the targeted HTML element will be set to the original, untruncated string. Valid values include true and false.*/
                        //width: 'auto', /*(Default: 'auto') The width, in characters, of the desired text. When set to 'auto', trunk8 will maximize the amount of text without spilling over.*/
                        parseHTML: true /*(Default: 'false') When true, parse and save html structure and restore structure in the truncated text.*/
                        //onTruncate /*(Callback): Called after truncation is completed.*/
                   });
                   $(element).on('click', '#read-more', function (event) {
                        $(element).trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
                   });
                   $(element).on('click', '#read-less', function (event) {
                        $(element).trunk8();
                   });
                }
            });
        }
    };
}]);

视图:

<ion-item ng-repeat="page in pages">
  <div ng-bind-html="page.extract" class="item item-text-wrap" ellipsis></div>
</ion-item>