AngularJS: Tronque multi-ligne HTML lié dans ng-repeat / ng-bind-html

J'ai suivi ng-repeat

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

Où item.text est un texte HTML multi-lignes et il s'affiche correctement, mais je dois le tronquer à la hauteur maximale de l'article-poste div (250px). Ensuite, ajoutez trois points indiquant que ce texte est plus long.

Je voulais utiliser jquery.autoellipsis qui fonctionne par exemple sur div avec du contenu statique.

Pour AngularJS, j'ai trouvé des ellipses angulaires , mais ne fonctionne pas avec HTML, seulement du texte brut. Je dois l'atteindre sur le contenu HTML.

• Angularjs et jquery ne fonctionnent pas sous ma forme simple et régulière
• Comment tester l'application angulaire avec John Papa style, Karma et Jasmine avec un service de données?
• Passer le champ d'accès à Service on AngularJS
• AngularJs ui-router $ location ou $ state?
• Angular et Parse

Merci d'avance pour votre aide!

EDIT / SOLUTION:

Enfin, j'ai pu utiliser le plugin jquery.autoellipsis en utilisant une directive personnalisée (basée sur la réponse d'asgoth):

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

Et en vue partielle:

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

EDIT2:

La directive de la réponse d'asgoth après son édition fonctionne bien, en utilisant une autre approche que la directive susmentionnée.

• Directive Angularjs pour obtenir des données d'un appel ajax dans le contrôleur
• Angularjs – $ http success vs then
• La validation de formulaire AngularJS sur les directives d'entrée générées dynamiquement ne fonctionne pas avec ngForm
• Django formset equivalent in angular.js
• Comment puis-je faire un test d'unité pour voir si angulaire est indéfini?

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

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