ng-repeat 后截断文本

Question

我想在 ng-repeat 完成 angular 后截断文本。

我发现一个简单的方法是使用 limitTo 过滤器来限制文本长度。 但是，我想按其实际宽度转动文本。

参考下面的页面，这是我的代码： Calling a function when ng-repeat has finished

html:

<div id="feedList"> 
    <div ng-repeat="feed in feeds | orderBy: '-date' "  feed-list-repeat-directive>
        <h4><span>{{ feed.title }}</span></h4>            
        <!-- some more contents here -->
    </div>
</div>

Javascript：

 var app = angular.module('anApp', []);
    app.controller('anCtrl', function($scope, $http) {  
        $http.get("data.php")   
        .success(function(response) {
            $scope.feeds = response.feeds;
        }); 
        $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {    

            // truncate text by width ##################################### 
            for(a=0; a<$('#feedList > div').length; a++){
                $thisH4 = $('#feedList > div').eq(a).children('h4');
                if($thisH4.width()<$thisH4.children('span').width()){                       
                    var txt = $thisH4.children('span').text();                  
                    while($thisH4.width()<$thisH4.children('span').width()){                
                        txt = txt.substr(0,txt.length-1);                       
                        $thisH4.children('span').text(txt+'...');
                    }
                };
            };
            //#######################################################   

        });
    })
    .directive('feedListRepeatDirective', function($timeout){
         return {
            restrict: 'A',
            link: function(scope, element, attrs) {         
                if (scope.$last){
                    $timeout(function () {
                        scope.$emit('ngRepeatFinished');            
                    });     
                };
             }
         }
    });

问题是，当 $scope.$on('ngRepeatFinished') 运行时，数据并没有真正加载到 dom，$thisH4.children('span').width() 返回 0，

只有当我通过 setTimeout() 设置 0.4 秒延迟时它才有效，但我认为这样做没有意义。

有什么办法可以解决这个问题还是我最好坚持limitTo过滤？

谢谢

Answer 1

您无需等待 ng-repeat 完成，您可以通过自己设置文本元素来打破角度绑定。为什么不在h1 上创建一个指令呢？

app.directive('limitHorizontal', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        template: '<h1>{{header}}</h1>',
        replace: true,
        scope: {
            rawHeader: '&limitHorizontal'
        },
        link: function(scope, element, attributes) {
            var suffix = "...";
            scope.header = scope.rawHeader();

            // Work out the % that is over the limit
            var overflowPercentage = function() {
                return (element[0].scrollWidth - element[0].clientWidth)/element[0].scrollWidth;
            };

            var addSuffix = function() {
                // Wrapped in a timeout to queue it for the next digest cycle
                $timeout(function() {
                    var overflow = overflowPercentage();
                    if (overflow) {
                        scope.header += suffix;
                        limitContent();
                    }
                });
            };

            var limitContent = function() {
                // Wrapped in a timeout to queue it for the next digest cycle
                $timeout(function() {
                    var overflow = overflowPercentage();
                    if (overflow) {
                    newLength = scope.rawHeader().length - Math.ceil(overflow * scope.header.length);
                    scope.header = scope.rawHeader().substring(0, newLength) + suffix;
                    }
                });
            };

            addSuffix();
        }
    };
}]);

带标记：

    <div data-ng-repeat="header in headers">
        <h1 class="short-header" data-limit-horizontal="header"></h1>
    </div>

见plunker