-2

我重复了一堆要应用省略号的文本。我正在使用 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>

testimonial-truncate 的 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);
    };

似乎代码都被调用了，但即使删除了该类，文本仍被截断到最大高度。

我正在寻找一个解决方案，所以要么我如何获得我所做的工作，要么有更好的方法来做到这一点。

4

1 回答 1

0

因此，如果我没记错的话，您有几个元素块，并且您希望它们被缩短......一种符号，当您单击其中一个时，该元素会扩展而其余元素会缩小。

您需要将 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;
    }
}]);

那应该行得通。如果没有，请告诉我

顺便说一句 ，您的代码正在运行。只需要添加溢出：隐藏，也许。

于 2015-10-01T23:26:50.703 回答