Truncate Elements Directive

A "show more" directive

HTML

<div ng-app="App">
    <div ng-controller="MainCtrl">
        <h1>Show More Directive</h1>
        <div show-more='1'>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tellus malesuada, ultrices tellus quis, condimentum urna. Donec iaculis id turpis vel viverra. Etiam a ex dolor. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tellus malesuada, ultrices tellus quis, condimentum urna. Donec iaculis id turpis vel viverra. Etiam a ex dolor. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tellus malesuada, ultrices tellus quis, condimentum urna. Donec iaculis id turpis vel viverra. Etiam a ex dolor. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tellus malesuada, ultrices tellus quis, condimentum urna. Donec iaculis id turpis vel viverra. Etiam a ex dolor. </p>
        </div>
        <a ng-click='show()'>Show More</a>
    </div>
</div>

CSS

body {
    font-family: arial, helvetica, san-serif;
}

a {
    color: blue;
    cursor: pointer;
}

JavaScript

var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {
    
    $scope.show = function() {
        
    };
});

app.directive('showMore', function($animate) {
    return {
        restrict: 'A',
        transclude: 'element',
        link: function(scope, el, attrs, ctrl, transclude) {
            scope.$watch(attrs.showMore, function(value) {
                if (value) {
                    console.log(value);
                    transclude(scope, function(clone) {
                        //$animate.enter(clone, el.parent(), el);
                        //var showElements = clone.slice(value);
                        el.after(clone);
                    });
                }
            });
        }
    };
});