javascript - Angular的BookJS

我正在将Bookblock与angularJS一起使用。首页可以很好地加载所有内容（JSON文件），但是当我打开该页面时，它会失败并引发如下错误：

TypeError：config。$ bookBlock.bookblock不是一个函数

Controller.js

'use strict';

angular.module('myApp.controllers', [])

服务：

.service('myService', function () {
 return {
  fn: function () {
          var Page = (function() {
            var config = {
               //console.log("1 .inside 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....&&&&&&&&&&&");
                   // console.log(config.$bookBlock);
                    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;
                        }
                    } );

                    // add keyboard events
                    $( document ).keydown( function(e) {
                        var keyCode = e.keyCode || e.which,
                            arrow = {
                                left : 37,
                                up : 38,
                                right : 39,
                                down : 40
                            };

                        switch (keyCode) {
                            case arrow.left:
                                config.$bookBlock.bookblock( 'prev' );
                                break;
                            case arrow.right:
                                config.$bookBlock.bookblock( 'next' );
                                break;
                        }
                    } );
                };
                return { init : init };

        })();
          Page.init();
       }
     }
 })

主控制器

.controller('MainCtrl', ['$scope', 'FeedService','$http','$rootScope', '$window', '$location','myService','$route', function ($scope,Feed,$http, $rootScope, $window, $location, myService, $route)
{
    console.log("inside main contrhttp://localhost:8000/www/#story/1oller");
    $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");
}])

第二控制器：

 .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();

 }])

任何人都有解决方案，请分享...

最佳答案

我可以通过添加如下指令来解决此问题。
确保按照插件中指定的方式在html中添加指令和bb-bookblock类以及bb-item和nav元素的标签

angular.module('myapp', []).
directive('bookblock', function() {
    return {
    restrict:'AE',
    link: function(scope, element, attrs) {

        bookBlock =  element, // $(element).find("#bb-bookblock"),
        navNext = $(document).find('#bb-nav-next'),
        navPrev = $(document).find( '#bb-nav-prev'),

        bb = element.bookblock( {
            speed : 800,
            perspective : 2000,
            shadowSides : 0.8,
            shadowFlip  : 0.4,
            });

                var slides = bookBlock.children();

                // add navigation events
                navNext.on( 'click touchstart', function() {
                    element.bookblock( 'next' );
                    return false;
                } );

                navPrev.on( 'click touchstart', function() {
                    element.bookblock( 'prev' );
                    return false;
                } );

                // add swipe events
                slides.on( {
                    'swipeleft' : function( event ) {
                        bookBlock.bookblock( 'next' );
                        return false;
                    },
                    'swiperight' : function( event ) {
                        bookBlock.bookblock( 'prev' );
                        return false;
                    }
                } );

                // add keyboard events
                $( document ).keydown( function(e) {
                    var keyCode = e.keyCode || e.which,
                        arrow = {
                            left : 37,
                            up : 38,
                            right : 39,
                            down : 40
                        };

                    switch (keyCode) {
                        case arrow.left:
                            bookBlock.bookblock( 'prev' );
                            break;
                        case arrow.right:
                            bookBlock.bookblock( 'next' );
                            break;
                    }
                } );

    }
    };
});