javascript - 将 wowbook 与 ionic 集成

Question

我已经成功地将 wowbook ( https://github.com/yapro/wowbook ) 与 ionic 集成，但每次我翻书时， ionic 将我送回 $urlRouterProvider.otherwise('/login');。

就像 ionic 无法识别状态#/book。

这是我的代码: http://plnkr.co/edit/BKpXGfU64t69ITWiMtQh?p=preview

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.backButton.text('').previousTitleText('');

    $stateProvider
        .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "menu.html",
        controller: 'AppCtrl'
    })

    .state('login', {
        url: "/login",
        templateUrl: "login.html"
    })

    .state('book', {
        url: '/book',
        templateUrl: "book.html",
        controller: function($stateParams, $timeout) {
            $timeout(function() {
                $(document).ready(function() {
                    $('#features').wowBook({
                        height: 500,
                        width: 800,
                        centeredWhenClosed: true,
                        hardcovers: true,
                        turnPageDuration: 1000,
                        numberedPages: [1, -2],
                        controls: {
                            zoomIn: '#zoomin',
                            zoomOut: '#zoomout',
                            next: '#next',
                            back: '#back',
                            first: '#first',
                            last: '#last',
                            slideShow: '#slideshow',
                            flipSound: '#flipsound',
                            thumbnails: '#thumbs',
                            fullscreen: '#fullscreen'
                        },
                        scaleToFit: "#container",
                        thumbnailsPosition: 'bottom',
                        onFullscreenError: function() {
                            var msg = "Fullscreen failed.";
                            if (self != top) msg = "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
                            alert(msg);
                        }
                    }).css({ 'display': 'none', 'margin': 'auto' }).fadeIn(1000);

                    $("#cover").click(function() {
                        $.wowBook("#features").advance();
                    });

                    var book = $.wowBook("#features");

                    function rebuildThumbnails() {
                        book.destroyThumbnails()
                        book.showThumbnails()
                        $("#thumbs_holder").css("marginTop", -$("#thumbs_holder").height() / 2)
                    }
                    $("#thumbs_position button").on("click", function() {
                        var position = $(this).text().toLowerCase()
                        if ($(this).data("customized")) {
                            position = "top"
                            book.opts.thumbnailsParent = "#thumbs_holder";
                        } else {
                            book.opts.thumbnailsParent = "body";
                        }
                        book.opts.thumbnailsPosition = position
                        rebuildThumbnails();
                    })
                    $("#thumb_automatic").click(function() {
                        book.opts.thumbnailsSprite = null
                        book.opts.thumbnailWidth = null
                        rebuildThumbnails();
                    })
                    $("#thumb_sprite").click(function() {
                        book.opts.thumbnailsSprite = "images/thumbs.jpg"
                        book.opts.thumbnailWidth = 136
                        rebuildThumbnails();
                    })
                    $("#thumbs_size button").click(function() {
                        var factor = 0.02 * ($(this).index() ? -1 : 1);
                        book.opts.thumbnailScale = book.opts.thumbnailScale + factor;
                        rebuildThumbnails();
                    })

                });
            }, 0);

        }

    });

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/login');
});

Answer 1

我在 ionic 存储库中遇到了同样的问题，就我认为翻转页面附加网址而言，基本上是错误的，这就是为什么它看不到状态列表中的状态，因此它会转到其他状态说明这是您的登录状态。

只需浏览代码并查看附加网址的位置，然后尝试解决该问题

如果我下周末有时间，我一定会帮忙

还有其他在线翻转教程，您可以使用其中的任何一个

问候 埃扎兹