Siemko Siemko - 6 days ago 4
Javascript Question

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?

Answer

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>