dotdotdot больше не работает с Angularjs

Question

У меня есть повторение с кучей текста, к которому я хочу применить многоточие. Я использую jquery dotdotdot. документация dotdotdot

Я сделал простую директиву, которая выглядит как

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');
          }
        }
      });
    }
  };
}]);

Он работает отлично, применяя многоточие, но когда кто-то нажимает на элемент, я хочу, чтобы он раскрылся.

Мой HTML выглядит

  <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>

CSS для свидетельства-усекать

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

моя функция щелчка выглядит как

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

Кажется, что весь код вызывается, но текст все еще усекается до максимальной высоты, даже если этот класс удален.

Я ищу решение, так что либо как мне получить то, что я сделал, работая, либо есть лучший способ сделать это.

Answer 1

Так что, если я не ошибаюсь, у вас есть несколько блоков элементов, и вы хотите, чтобы они были сокращены... что-то вроде обозначения, и когда вы щелкнете по одному из них, этот элемент расширится, а остальные уменьшатся.

Вам нужно будет поместить условие ng-class, чтобы оно не равнялось индексу элемента, и в этом случае приложение запускает все элементы ng-class == true; и когда вы нажимаете, вы устанавливаете этот элемент ng-class == false и остальные из них == 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>

И ваш контроллер является тестовым контроллером

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

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

Это должно работать. Дайте мне знать, если это не так

Кстати ваш код работает. просто нужно добавить переполнение: скрытый, возможно.