AngularJS：截断多行HTML在NG-重复/ NG绑定，绑定的HTML [英] AngularJS: Truncate multi-line HTML bound in ng-repeat/ng-bind-html

问题描述

我有以下NG-重复

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

其中item.text是多行HTML文本并显示正确，但我需要它截断到格（250像素）项目-后的最大高度。然后追加三个点signalizing该文本是更长的时间。

where item.text is multi-line HTML text and it displays correctly, but I need to truncate it to max-height of item-post div (250px). And then append three dots signalizing that text is longer.

我想用 jquery.autoellipsis 这是工作，例如在 DIV 与静态内容。

I wanted to use jquery.autoellipsis which is working for example on div with static content.

有关AngularJS我发现角省略号的，但不能与HTML工作，只有纯文本。我需要实现它的HTML内容。

For AngularJS I have found angular-ellipsis, but is doesn't work with HTML, only plain text. I need to achieve it on HTML content.

预先感谢帮助！

编辑/解决方案：

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

Finally I have been able to use jquery.autoellipsis plugin using custom directive (based on asgoth's answer):

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的回答他的指令后编辑效果很好，使用除上述指令的另一种方法。

Directive from asgoth's answer after his edit works well, using another approach than above-mentioned directive.

推荐答案

如果我是你，我会做一个指令以使用jQuery插件（jquery.autoellipsis）：

If I were you I would make a directive to use the jquery plugin (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>

当然，你需要包括在剧本标记的jQuery插件。

Of course, you need to include the jquery plugin in a script tag.

修改：我已经编辑了答案，所以该指令将监视的HTML改变（由ngBindHtml完成）

EDIT: I've edited the answer, so the directive will watch for the html to change (done by ngBindHtml).

这篇关于AngularJS：截断多行HTML在NG-重复/ NG绑定，绑定的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！