Create read more link in AngularJS

Question

I want to create a link with read more text. if there are more than 3 lines in a paragraph this link should be visible and clicking on this it show display all the lines.

Answer 1

Based on some of the information here I've put together a nice show more/less implementation

Directive Definition showMore.js

.directive('showMore', 
function(){
    return {
        templateUrl: 'showMore.html',
        restrict: 'A',
        transclude: true,
        scope:{
            'showMoreHeight': '@'
        },
        controller: ['$scope', '$element', '$interval', function($scope, $element, $interval) {

            $scope.expanded = false;

            $interval(function(){
                renderStyles();
            }, 300);

            $scope.expandable = false;
            function renderStyles(){
                if($element.height() >= $scope.showMoreHeight && $scope.expanded === false){
                    $scope.expandable = true;
                }
            }

            $scope.showLessStyle = {
                'max-height': $scope.showMoreHeight + 'px',
                'overflow': 'hidden'
            };

        }]
    };
});

showMore.html

    

    
    

    
    show more
    show less

The usage is fairly simple just transclude what ever you want to show more/less of

USEAGE:

I hope this is somewhat helpful!