Question

我有以下ng-repeat

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text"></div>
</div>

其中item.text是多行HTML文本并且显示正确，但我需要将其截断为item-post div（250px）的max-height。然后附加三个点，表示文本更长。

我想在div上使用jquery.autoellipsis来处理静态内容。

对于AngularJS，我找到了angular-ellipsis，但它不适用于HTML，只适用于纯文本。我需要在HTML内容上实现它。

提前感谢您的帮助！

修改/溶液

最后，我已经能够使用自定义指令使用jquery.autoellipsis插件（基于asgoth的答案）：

myDirectives.directive('htmlEllipsis', ['$timeout', function($timeout) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                $timeout(function() {
                    angular.element(element).ellipsis();
                }, 0);

            }
        };
    }]);

在局部视图中：

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text" html-ellipsis></div>
</div>

EDIT2：

asgoth在编辑后的回答很有效，使用的方法与上述指令不同。

Answer 1

如果我是你，我会指示使用jquery插件（jquery.autoellipsis）：

angular.module('myModule').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 ellipsis only one
                   $scope.hasEllipsis = true;
                   element.ellipsis();
               }
            });
        }
    };
}]);

你的html就是：

<div class="item-content" ng-bind-html="item.text" ellipsis></div>

当然，您需要在script标记中包含jquery插件。

编辑：我已经编辑了答案，因此该指令会监视要更改的html（由ngBindHtml完成）。

Answer 2

与接受的答案类似，此替代方案可以改进自定义：https://github.com/dibari/angular-ellipsis

AngularJS：截断ng-repeat / ng-bind-html中绑定的多行HTML

2 个答案: