AngularJS：截斷多線HTML以ng重複/ NG綁定-HTML結合

Question

我具有以下NG-重複

<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）的最大高度。然後附加三個點，表示文字較長。

我想使用jquery.autoellipsis這是工作在例如div與靜態內容。

對於AngularJS我找到了angular-ellipsis，但它不適用於HTML，只能用純文本。我需要在HTML內容上實現它。

在此先感謝您的幫助！

編輯/解決方案：（基於asgoth的答案）

最後，我已經能夠使用jquery.autoellipsis使用自定義指令插件：

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> 

當然，你需要包括jQuery插件中的script標籤。

編輯：我編輯了答案，所以指令會監視html的更改（由ngBindHtml完成）。

Answer 2

到接受的答案相似，這種替代允許改善定製：https://github.com/dibari/angular-ellipsis