dotdotdot看到更多不能與Angularjs合作

-2

我有一堆文本重複我想應用省略號。我正在使用jquery dotdotdot。 dotdotdot documentation dotdotdot看到更多不能與Angularjs合作

我做了一個簡單的指令，看起來像

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

好像代碼都被稱爲但即使刪除了該類，文本仍會截斷到最大高度。

我正在尋找解決方案，所以要麼我如何得到我所做的工作，要麼有更好的方法來做到這一點。

來源

2015-10-01 Leo

爲什麼要投票？我可以改變這個問題嗎？我該如何改進它？ – Leo

只是可以肯定的是，你有一堆與擴展按鈕塊。點擊時你想讓它顯示所有的文字，對吧？ –

那麼'dotdotdot'是做什麼的？沒有代碼顯示該指令 – charlietfl

所以，如果我沒有弄錯，你有幾個塊的元素，你希望他們縮短...符號的種類，當你點擊其中一個元素，該元素將擴大，其餘的縮小。

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

這應該工作。讓我知道，如果它不

BTW 您的代碼正在工作。只需要添加溢出：也許隱藏。

來源

2015-10-01 23:26:50

感謝您的答覆。我認爲我的問題與班級被刪除和dotdotdot被解僱之間的競爭條件有關。這就是爲什麼我把它放在超時。當我只是刪除類時，它不重新計算省略號，所以我打電話更新後，但它似乎從來沒有擴大。 – Leo

http://stackoverflow.com/questions/28197197/angularjs-dotdotdot-for-overflow-text-and-performance 看看這個dotdotdot插件。這可能有幫助 –

dotdotdot看到更多不能與Angularjs合作

回答

相關問題