整合wowbook与离子

时间:2016-06-16 03:55:12

标签: javascript angularjs ionic-framework angular-ui-router

我已经成功地将wowbook(https://github.com/yapro/wowbook)与离子相结合,但每次我翻书时, 离子送我回$urlRouterProvider.otherwise('/login');

像离子一样,不会识别状态#/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');
});

2 个答案:

答案 0 :(得分:0)

我的离子回购问题也存在同样的问题基本上是错误的,因为我认为翻转你的页面会附加网址,这就是为什么它无法看到状态列表中的状态和因此它会进入另一种状态,即你的登录状态。

只需浏览代码,看看您在哪里看到了网址,并尝试解决该问题

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

还有其他在线翻转教程可以使用其中的任何人

此致 Ezaz

答案 1 :(得分:0)

我刚刚在wowbook wiki上发现了这个,wowbook就像离子一样有自己的哈希网址。所以这两个哈希网址都是冲突的。

解决问题只需通过添加到您的控制器updateBrowserURL来关闭wowbook hash url(#/ book):false