AngularJS: Truncate multi-line HTML bound in ng-repeat/ng-bind-html

Question

I have following ng-repeat

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

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.

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

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.

Thanks in advance for help!

EDIT/SOLUTION:

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);

            }
        };
    }]);

And in partial view:

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

EDIT2:

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

asgoth · Accepted Answer · 2014-02-28 10:22:28Z

5

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();
               }
            });
        }
    };
}]);

Your html is then:

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

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

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

edited Feb 28, 2014 at 10:22

answered Feb 27, 2014 at 21:15

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kamelot Over a year ago

Thank you, directive approach has worked. I needed to modify the directive a little bit (added $timeout to wait until binding is finished). Also I have updated question with working solution for this case. I'm accepting this as an answer since it has pointed me to correct direction. Thanks!

asgoth Over a year ago

A pity for that $timeout service. I think the same could be achieved by watching the html content via element.html().

Urb Gim Tam · Accepted Answer · 2015-01-28 17:42:42Z

1

Similar to the accepted answer, this alternative allows improved customization: https://github.com/dibari/angular-ellipsis

answered Jan 28, 2015 at 17:42

Urb Gim Tam

4594 silver badges11 bronze badges

Collectives™ on Stack Overflow

AngularJS: Truncate multi-line HTML bound in ng-repeat/ng-bind-html

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related