我已经成功地将wowbook(https://github.com/yapro/wowbook)与ionic集成在一起,但是每次翻书时,
离子将我送回$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');
});
最佳答案
我在ionic仓库中遇到了同样的问题,据我所知,基本上是错的,因为我认为翻转页面后会附加网址,这就是为什么它看不到状态列表中的状态,因此会转到其他状态登录状态。
只需检查一下代码,看看您在哪里看到了url,然后尝试解决该问题。
如果我下周末有时间,我一定会帮忙
仍然有其他在线翻转教程,您可以使用其中的任何一个
问候
埃扎兹
关于javascript - 将Wowbook与 ionic 结合,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37849633/