AngularJS and Reveal.js slideshow

by Christian Bonato

HTML

<link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/reveal.min.css">
<link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/theme/default.css">
<div ng-app='myApp' class='reveal' ng-controller='MyController'>
  <div slideshow='slides'></div>
</div>

<script type='text/javascript' src=''></script>

JavaScript

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

app.directive('slideshow', function() {
  return {
    scope: {
      slides: '=slideshow'
    },
    link: function(scope, elem, attrs) {
      elem.addClass('slides');
      for (var i = 0; i < scope.slides.length; i++) {
        var section = angular.element("<section>");
        var steps = scope.slides[i].steps;

        if (steps.length == 1) {
          var content = angular.element("<h1>").html(steps[0]);
          section.append(content);
        } else {
          for (var j = 0; j < steps.length; j++) {
            var subSection = angular.element("<section>");
            if (j < steps.length - 1)
              subSection.attr('data-autoslide', '1000');
            var content = angular.element("<h1>").html(steps[j]);
            subSection.append(content);
            section.append(subSection);
          }
        }

        elem.append(section);
      }
      
      Reveal.initialize({
        loop: false,
        transition: Reveal.getQueryHash().transition || 'none'
      });
    }
  };
});

app.controller("MyController", function($scope) {
  $scope.slides = [
    { 'steps': ['a'] },
    { 'steps': ['b1', 'b2'] },
    { 'steps': ['c1'] }
  ];
});