Search code examples
javascriptangularjsimpress.js

AngularJS template with ImpressJS

I am looking for a solution to make Impress.js library working with an AngularJS app.

In my index.htm file I have got everything included, my template is:

<div id="impress" class="impress-not-supported" name="impress">
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
    <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>
<div class="step slide" data-x="0" data-y="-1500">
    <q>Don’t you think that presentations given <strong>in modern browsers</strong> shouldn’t <strong>copy the limits</strong> of ‘classic’ slide decks?</q>
</div>

<div class="step slide" data-x="1000" data-y="-1500">
    <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
</div>

I was trying to initialize Impress.js by using

impress().init();

in my index.htm file or in template, but it didn't work. I tried to add this code to my controller, but I only got

Error: body is null

from Impress.js

Is there a way to make impress.js working with angular?

Solution

  • What I did, was to add function to my controller:

    $scope.renderSlideHtml = function (slide) {
    $timeout(function () { impress().init(); }, 500);
    return $sce.trustAsHtml(slide.html);
}

    Timeout is added to make sure, that impress.js loads properly.

    And then in my view:

    <div ng-repeat="slide in slides" ng-bind-html="renderSlideHtml(slide)" id="{{slide.id}}"></div>