Show all

[Zombi]

How can I show all text on click please ? I tried to change the height of element, but I think it needs some 'restart' after then. Can you help me ? Thankx

[Eric Di Bari]

You want the full text to be shown when the append text is clicked? Or, you want the full text to be shown when any of the concatenated text is clicked?

[Zombi]

Just when I click on append text would be OK.

[Collin Allen]

I'm running into the same issue. I have angular-ellipsis working and truncating correctly, but when I add ellipsis-append and ellipsis-append-click, I'm not sure how to "turn off" the truncation effect when I click the ellipsis-append element.

For example, here I have my section set to max-height: 150px, and when you click Read more, I remove the max-height by using ng-class:

<section
    ng-bind="description"
    ellipsis
    ellipsis-append="Read more"
    ellipsis-append-click="showFullText=true"
    ng-init="showFullText=false"
    ng-class="{'unabbreviated':showFullText}">
</section>

section {
  max-height: 150px;
}
section.unabbreviated {
  max-height: none;
}

I can observe in the Web Inspector that the unabbreviated class is being applied by Angular when I click the ellipsis-append element, so that part is working correctly, but angular-ellipsis does not then re-evaluate the element's new height and show the full text that existed before the directive was applied.

[Collin Allen]

I just noticed something: the above is still true, but I can trigger the re-evaluation of the height by resizing my browser just a little. So, to make the above "work", I click Read more, then resize my browser window. It's so close to perfect!

[Collin Allen]

I seem to have fixed this by calling buildEllipsis(); right after scope.$apply gets called, but I'm unsure if it's a good fix.

[Adam Goldman]

Can u share your code @commandtab ?
How do you trigger that? Did you fork the project?

[Collin Allen]

Sorry, I don't think I have that snippet anymore, @Adam-Goldman7. The shipping code ended up with a small directive wrapping jQuery dotdotdot, and that's been working well in production for some time.

[Maxime Lévesque]

@commandtab, would you mind sharing your dotdotdot angular integration ?

[Collin Allen]

@max-l It's remarkably short. Once dotdotdot is loaded (I use RequireJS, but really any JS loader ought to work), you keep track of whether you've already applied dotdotdot to the element, and if not, apply it:

angularModule.directive('dotdotdot', [function () {
  return {
    required: 'ngBindHtml',
    restrict: 'A',
    priority: 100,
    link: function ($scope, element, attrs, ctrl) {
      $scope.isTruncated = false;
      $scope.$watch(element.html(), function (value) {
        if (!$scope.isTruncated) {
          $scope.isTruncated = true;
          element.dotdotdot();
        }
      })
    }
  };
}])

Usage might be a little different depending on if your directive's content is being trusted as HTML, but that's the basic idea.