dotdotdot see more not working with Angularjs

Question

I have a repeat with a bunch of text I want to apply the ellipsis to. I am using jquery dotdotdot. dotdotdot documentation

I made a simple directive that looks like

angular.module('core').directive('dotdotdot', [function () {
  return {
    required: 'ngBind',
    restrict: 'A',
    replace: false,
    priority: 100,
    link: function ($scope, element, attrs, ctrl) {
      $scope.isTruncated = false;
      $scope.hasRun = false;
      $scope.$watch(element.html(), function (value) {
        if (!$scope.hasRun) {
          $scope.hasRun = true;
          element.dotdotdot({watch:'window',
                              after: 'a.dotdotdotMore'});
          $scope.isTruncated = element.triggerHandler('isTruncated');
          if ($scope.isTruncated){
              console.log('Truncated');
          } else {
              console.log('NOT Truncated');
          }
        }
      });
    }
  };
}]);

It works fine applying the ellipsis but when someone clicks the item I want it to expand.

My html looks like

  <div class="review item" data-ng-repeat="review in creator.reviews | orderBy:'order' track by $index">
    <h1 dotdotdot data-ng-bind="review.review" class="testimonial" data-ng-class="{'testimonial-truncate': showTestimonial !== $index}" data-ng-click="testimonialClick($index);"></h1>

  </div>

the css for testimonial-truncate is

.testimonial-truncate {
   max-height:200px;
}

my click function looks like

$scope.testimonialClick = function (index) {
      if ($scope.showTestimonial && $scope.showTestimonial === index) {
        $scope.showTestimonial = -1;
      } else {
        $scope.showTestimonial = index;
      }
      $timeout(function() {
        $('.testimonial').trigger('update');
      }, 200);
    };

It seems like the code is all being called but the text is still truncated to the maximum height even though that class is removed.

I am looking for a solution so either how do I get what I have done working or is there a better way to do this.

why the down vote? can I change the question? how do I improve it? — Leo, Oct 01 '15 at 20:18
just to be sure, you have bunch of blocks with expand button. and when clicked you want it to show all the text, right? — qwerty_igor, Oct 01 '15 at 22:46
so what does `dotdotdot` do? No code shown for that directive — charlietfl, Oct 01 '15 at 22:55
sorry adding that directive. I think that there is something in the processing that the ellipsis is being recalculated on the already shortened text — Leo, Oct 02 '15 at 13:13

qwerty_igor · Answer 1 · 2015-10-01T23:45:04.880

So If I am not mistaken you have several blocks of elements and you want them to be shortened ... kind of notation, and when you click on one of them, that element would expand and rest of them shrink.

You would need to place ng-class condition to not to equal the index of the item, in which case when app starts all items ng-class == true; and when you click you set that element ng-class == false and rest of them == true.

<div ng-controller="test">
    <div ng-repeat="item in items track by $index">
        <h1 ng-class="{'testimonial-truncate' : expanded != $index }"> 
            {{ item }} 
        </h1>
        <button ng-click="setExpand($index)">expand</button>
    </div>
</div>

And your controller is Test Controller

app.controller('test', ['$scope', function($scope){
    $scope.expanded = -1;

    $scope.setExpand = function(indx){
        $scope.expanded = indx;
    }
}]);

That should work. Let me know if it doesn't

BTW your code is working. just need to add overflow:hidden, perhaps.

Thanks for the answer. I think my problem has to do with a race condition between the class being removed and the dotdotdot getting fired. That is why I put it in a timeout. When I just remove the class it does not recalculate the ellipsis so I call update after but It never seems to expand. — Leo, Oct 02 '15 at 13:11
http://stackoverflow.com/questions/28197197/angularjs-dotdotdot-for-overflow-text-and-performance Take a look at this for dotdotdot plugin. This might help — qwerty_igor, Oct 02 '15 at 17:00

dotdotdot see more not working with Angularjs

1 Answers1