AngularJS 带有 ImpressJS 的模板

Question

我正在寻找使 Impress.js 库与 AngularJS 应用程序一起工作的解决方案。

在我的 index.htm 文件中，我已经包含了所有内容，我的模板是：

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

impress().init();

在我的 index.htm 文件或模板中，但它不起作用。我试图将此代码添加到我的控制器，但我只得到

Error: body is null

来自 Impress.js

有没有办法让 impress.js 与 angular 一起工作？

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>

AngularJS 带有 ImpressJS 的模板

AngularJS template with ImpressJS

javascript

angularjs

impress.js