I have integrated Bookblock with angularJS successfully on the first page load. However, I encountered an issue when trying to turn the page, resulting in the following error:
TypeError: config.$bookBlock.bookblock is not a function
Controller.js
'use strict';
angular.module('myApp.controllers', [])
service:
.service('myService', function () {
return {
fn: function () {
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' )
},
init = function() {
console.log("2 .inside init....");
config.$bookBlock.bookblock( {
speed : 1000,
shadowSides : 0.8,
shadowFlip : 0.4
} );
console.log("2.5 .at last init.... ");
initEvents();
},
initEvents = function() {
console.log("3 .inside init event....");
var $slides = config.$bookBlock.children();
// add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );
config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );
config.$navFirst.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'first' );
return false;
} );
config.$navLast.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'last' );
return false;
} );
// add swipe events
$($slides).on( {
'swipeleft' : function( event ) {
config.$bookBlock.bookblock( 'next' );
return false;
},
'swiperight' : function( event ) {
config.$bookBlock.bookblock( 'prev' );
return false;
}
} );
// additional code removed for brevity
};
return { init : init };
})();
Page.init();
}
}
})
Main Controller :
.controller('MainCtrl', ['$scope', 'FeedService','$http','$rootScope', '$window', '$location','myService','$route', function ($scope,Feed,$http, $rootScope, $window, $location, myService, $route)
{
console.log("inside main controller");
$scope.slides = '';
$scope.goCats = false;
$scope.menu_item_names = ['Insights and Publications', 'McKinsey News ', 'Recomanded Reading', 'Alumni News', 'McKinsey Bookshelf','McKinsey Talks', 'Know', 'McKinsey Calendar', 'Engagement Channel', 'McKinsey Technology Site'];
myService.fn(); //calling service
console.log("inside main last line");
}])
Second Controller :
.controller('secondPageControllers', ['$scope', '$rootScope','myService','paging' , '$window', '$location', 'Story', '$routeParams', function ($scope, $rootScope, myService, paging, $window, $location, Story , $routeParams)
{
console.log('secondPageControllers')
console.log($routeParams.templateID + "params 1");
$scope.slide = '';
Story.query({},
function success(data) {
console.log(data.length);
$scope.stories = data ;
$scope.templateID = $routeParams.templateID;
console.log(data);
},
function err() {
console.log('error')
});
myService.fn();
}])
If anyone has a solution, please share it...