Усекать текст после ng-repeat

Question

Я хочу обрезать текст после ng-repeat, законченного в угловом.

Я нашел простой способ использовать 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');    
        });  
       }; 
      } 
     } 
    }); 

Проблема заключается в том, когда $ сфера $ на ('ngRepeatFinished'), данные фактически не загружаются в dom, $ thisH4.children ('span'). width() возвращает 0,

Работает только в том случае, если setTimeout() установлен на 0,4 с, но я думаю, что это не смысл.

Есть ли способ решить проблему или я лучше придерживаюсь limitTo фильтра?

благодарит

Answer 1

Вам не нужно ждать нг-повторить до конца, и вы нарушаете угловую привязку, установив текстовый элемент самостоятельно. Почему бы не создать директиву на 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