在angularjs bootstrap模态中使用turn js

Question

我已经完成了基于的模态服务 dan wahlins blog

在这个模型中，我试图通过将它包装在angularjs自定义指令中来使用turnjs翻书。 指令代码如下所示。

 mod.directive('flipBook', function () {
    return {
        restrict: 'E',
        templateUrl: '/views/html/amlModule/kyc/flipModule.html',
        replace: true,
        compile: function (element, attrs) {

            element.bind('turning', function (event, page, obj) {
                console.log("page is : " + page);
            });

            element.turn({
                width: '200px',
                height: '200px',
                pages: 8
            }).turn('peel', 'br');

            element.addClass('flipbook');
        }
    }
});

模板HTML如下所示

<div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</div>

当我将它用作单独的程序时，即：当我在绑定到angularjs应用程序的普通html中包含自定义指令时，它工作正常，

但是当我使用它与bootstrap模态服务时，我只得到书的第一页，不允许转动和交互。

在谷歌浏览器中没有关于此事的错误，

我现在有点困惑，你们有什么建议可以解决这个问题吗？

ps：下面是我将自定义指令与模态服务一起使用时的图像。

Answer 1

我有同样的问题，原因是当你调用模态时没有调用turn.js，你有两个选择 1）将turn.js相关脚本放在实际的模态体中 要么 2）当你调用模态运行turn.js时，它将调用DOM。