在angular Directive中outerHeight> 30时替换文本

Question

This takes place inside of an Angular directive link function.

So I have this working, but I was trying to use the angular's directive $element to do it one better. It seems I get stuck in an endless loop. What I am I doing wrong - I thought it would be easy, but I am obviously missing something fundamental here.

This works:

$timeout(function(){
    $('.add-ellipsis').each(function() {
              var $ellipsisText = $(this);
              while ($ellipsisText.outerHeight() > 30) {
                $ellipsisText.text(function(index, text) {
                  return text.replace(/\W*\s(\S)*$/, '...');
                });
              }
            });
}, false);

Example: https://jsfiddle.net/rooksstrife/7chxph91/12/

Trying to change it to: To note ($element.context.firstChild.firstElementChild.innerText = "a long string of text".

$timeout(function(){
          while ($element.outerHeight() > 30) {
           $element.context.firstChild.firstElementChild.innerText.replace(/\W*\s(\S)*$/, '...');
          }
    }, false);

Answer 1

You can create directive for ellipsis .

Example on jsfiddle .

 angular.module("ExampleApp", []) .controller("ExampleController", function($scope) { }) .directive('ellipsis', function() { return { restrict: "EA", scope: { ellipsis: "=" }, link: function(scope, element) { var $ellipsisText = $(element); while ($ellipsisText.outerHeight() > scope.ellipsis) { $ellipsisText.text(function(index, text) { return text.replace(/\\W*\\s(\\S)*$/, '...'); }); } } }; }); 

 .card { max-width: 198px; } .title { text-align: center; font-size: 15px; color: #ffffff; height: 47px; max-height: 47px; overflow: hidden; width: 100%; padding: 0 10px; } .ell { vertical-align: middle; color: #000; text-decoration: none !important; border-bottom: 0 none; line-height: 1.5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp" ng-controller="ExampleController"> <div class="card"> <div class="title"> <a ellipsis="47" class="ell">AS THE SOUTH CAROLINA shifted stations during their first practice of August, new head coach Will Muschamp sang along to the tune blaring through the speakers that spoke to the entirety of the college football world. "CH-CH-CH-CH-CHANGES!" Its performer, David Bowie, is gone -- a reminder that time stops for no man.</a> </div> </div> </div>