AngularJS with reveal.js

Question

AngularJS with reveal.js

I trying use both AngularJS and reveal.js together. The following works:

<!doctype html>
<html ng-app>
    <head>
        <link rel="stylesheet" href="lib/reveal/css/reveal.min.css">

        <script type="text/javascript">
            function MyController($scope, $http, $location) {
                $scope.location = $location;
                $http.get('slides.json').success(function(data) {
                       $scope.slides = data;
                       setTimeout(function() {
                            Reveal.initialize();
                       }, .1 * 1000);
                });
            }
        </script>
    </head>
    <body>
        <div class="reveal">
            <div class="slides" ng-controller=MyController>
                <section ng-repeat="slide in slides">
                    <section ng-repeat="image in slide.images">
                        <img ng-src="{{image}}" />
                    </section>
                </section>
            </div>
        </div>

        <script src="lib/angular/angular.js"></script>
        <script src="lib/reveal/reveal.js"></script>
    </body>
</html>

Setting a time out feels so wrong. How should I change this?

javascript
html5
angularjs
3rd-party-library
reveal.js

Answer 1

I've been battling with a similar problem, I seem to have just solved it. As you suspected, using a 'timeout' will cause problems if it takes longer than 1 second for the data to load (which it probably doesn't if testing locally, but likely will when in production).

Check this solution:

http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#how-to-make-sure-your-directives-are-run-after-your-scope-is-ready

To make your solution more 'Angular' though, you may want to:

Refactor the 'http get' in to a Service, in particular the XHR and Dependency Injection section here: http://docs.angularjs.org/tutorial/step_05. This step mwill be useful as a lead in to the next step.
Use Misko Hevery's solution here to delay loading of the Controller until loading the XHR has resolved: Delaying AngularJS route change until model loaded to prevent flicker
You should initialise Reveal in a 'directive' (eg. of why), including to check for $whenReady.

Hope that helps, good luck!

Answer 2

This may not be exactly related to the question but can be considered to achieve the desired output. I used angular-leap library for slides. It provides great animations too.

here is demo.