ImpressJSを使用したAngularJSテンプレート

Question

AngularJSアプリケーションでImpress.jsライブラリを使用するためのソリューションを探しています。

<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> 

私は私の中

impress().init();

を使用してImpress.jsを初期化しようとしていた：私のテンプレートがあり、私はすべてが含まれてしまっている私のindex.htmファイルで

、 index.htmファイルまたはテンプレートでは動作しませんでした。角度での作業impress.jsを作るための方法があります私は自分のコントローラにこのコードを追加しようとしましたが、私は唯一のImpress.js

から

Error: body is null

を得ましたか。

私が何をしたか

Answer 1

は、私のコントローラに機能を追加することでした：

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

タイムアウトが適切に負荷をimpress.jsこと、を確認するために追加されます。 そして私の見解では：

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