相关疑难解决方法(0)

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

我有以下ng-repeat

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text"></div>
</div> 
Run Code Online (Sandbox Code Playgroud)

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

            }
        };
    }]);
Run Code Online (Sandbox Code Playgroud)

在局部视图中:

<div class="item-post" ng-repeat="item in items">
    <div class="item-content" ng-bind-html="item.text" html-ellipsis></div>
</div> 
Run Code Online (Sandbox Code Playgroud)

EDIT2:

在他的编辑工作得很好之后asgoth的回答指令,使用了另一种方法而不是上述指令.

html javascript truncate ellipsis angularjs

2
推荐指数
1
解决办法
9219
查看次数

标签 统计

angularjs ×1

ellipsis ×1

html ×1

javascript ×1

truncate ×1