One of my tasks involves dealing with a block of text that needs to be truncated using ellipsis. To achieve this, I am utilizing jquery dotdotdot. For more information on dotdotdot, please refer to the documentation.
I have created a straightforward directive as shown below
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');
}
}
});
}
};
}]);
The ellipsis is successfully applied but I would like it to expand when clicked
This is how my html appears
<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>
The css for testimonial-truncate is defined as follows
.testimonial-truncate {
max-height:200px;
}
This is the click function I have implemented
$scope.testimonialClick = function (index) {
if ($scope.showTestimonial && $scope.showTestimonial === index) {
$scope.showTestimonial = -1;
} else {
$scope.showTestimonial = index;
}
$timeout(function() {
$('.testimonial').trigger('update');
}, 200);
};
Despite the code being executed, the text remains truncated at the maximum height even after removing the class. I am seeking a solution to make my current implementation work or exploring better alternatives.