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

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.然后附加三个点,表示文本更长.

我想使用jquery.autoellipsis,例如div静态内容.

对于AngularJS,我发现了角度省略号,但不适用于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完成).