jquery slideToggle directive

jquery slideToggle directive using ng-repeat and web service to retrieve data

by jzbruno

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/isotope/1.5.21/jquery.isotope.min.js"></script>
<script src="http://cdn.jsdelivr.net/angularjs/1.0.2/angular.min.js"></script>
<div id="articles" data-ng-controller="ExamplesCtrl">
    <section data-ng-repeat="article in articles | orderBy:'-title'">
        <h2 data-slide-toggle>{{article.title}}</h2>
        <article>
            <p>{{article.text}}</p>
        </article>
    </section>
</div>

CSS

body { padding: 8px 20%; }
#articles { padding: 8px; border: 1px solid #ddd; }
section {
    margin: 0 auto; padding: 8px 0 0 8px; 
    border: 1px solid #ddd; }
section h2 { padding: 0 0 8px 0; }
section article { 
    margin: 0 8px 8px 0; padding: 4px; 
    border: 1px solid #ddd; }

JavaScript

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

examples.directive('slideToggle', function () {
    return {
        link: function (scope, element, attrs) {
            
            var toggle = function () {
                $(this).parent().find('article').slideToggle(400);
            };
            
            element.on('click', toggle);
        }
    }
});
    
    
examples.controller('ExamplesCtrl', function ExamplesCtrl($scope, $timeout, dataService) {
    
    $scope.articles = '';
        
    $scope.update = function () {
        dataService.get().then(function (data) {                       
            $scope.articles = data;
        });
        $timeout($scope.update, 30000);
    };
    
    $scope.update();
});
    
examples.service('dataService', function ($http) {
    return {
        get: function () {
            
            var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
            var articles = [
                { title: 'One', 'text': text },
                { title: 'Two', 'text': text },
                { title: 'Three', 'text': text }
            ];
            
            // prepare data for jsfiddle echo service
            var postData = $.param({
                'json': angular.toJson(articles),
                'delay': 2
            });
            
            var promise = $http
                .post('/echo/json/', postData)
                .then(function (resp) {
                    return resp.data;
                });
            
            return promise;
        }
    };
});