Question

我想重复使用省略号的一堆文本。我正在使用jquery dotdotdot。 dotdotdot documentation

我做了一个看起来像

的简单指令

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

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

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

Answer 1

所以，如果我没有弄错，你有几个元素块，你希望它们缩短......有点符号，当你点击其中一个元素时，那个元素会扩展，其余元素会缩小。

您需要将ng-class条件设置为不等于项目的索引，在这种情况下，当app启动所有项目时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;
    }
}]);

那应该有用。如果不是，请告诉我

<强>顺便说一句你的代码工作正常。只需要添加overflow：hidden，也许。

dotdotdot看到更多不使用Angularjs

1 个答案: