在 angluarjs 引导模式中使用 turnjs答案

【问题标题】：using turnjs inside angluarjs bootstrap modal在 angluarjs 引导模式中使用 turnjs
【发布时间】：2015-01-07 14:54:17
【问题描述】：

我做了一个模态服务基于 dan wahlins blog

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

 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 中包含自定义指令时，它工作正常，

但是当我将它与引导模式服务一起使用时，我只能得到书的第一页，不允许翻页和交互。

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

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

ps : 下面是我在模态服务中使用自定义指令时的图像。

【问题讨论】：

添加plunker链接
一个 plunker 链接在这里会很有帮助。虽然要开始，但请尝试绑定到指令的 link 函数中的元素。然后元素被绑定到 DOM 并准备好绑定。现在你在compile...

标签： jquery angularjs twitter-bootstrap angularjs-directive angular-ui

【解决方案1】：

我遇到了同样的问题，原因是调用modal时没有调用turn.js，你有两种选择 1）将turn.js相关脚本放入实际模态体中要么 2) 当你调用 modal 时运行 turn.js ，所以它会调用 DOM。

【讨论】：