从指令中删除事件监听器-Angular.js

Question

I have a problem with removing event listeners from mousewheel and wheel. I'm using fullpage.js plugin.

The problem is, when I get from my "about page" to another by clicking link (I am using the ui router for angular.js) and then clicking on back button to get back on about page, the event listeners on mousewheel and wheel are not removed and get an additional listener attached. Repeating these steps add more listeners.

.directive('dfAboutPagesView', function(  ) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
                scope.checkPackages = {
                    all: false
                };

            scope.$on("$destroy", function() {
                $(document).off();
            });

            var fullpage_in = function () {

                element.fullpage({
                    scrollingSpeed: 500,
                    autoScrolling: false
                });
                element.fullpage({
                    onLeave: function (index, nextIndex, direction) {
                        if (index == 1 && direction == 'down') {
                            $('#header').slideUp(500, 'easeInQuad');
                        }
                        else if (index == 2 && direction == 'up') {
                            $('#header').slideDown(500, 'easeInQuad');
                        }
                        else if (index == 3 && direction == 'down') {
                            $('#footer').slideDown(500, 'easeInQuad');
                        }
                        else if (index == 4 && direction == 'up') {
                            $('#footer').slideUp(500, 'easeInQuad');
                        }
                        }
                    });
                };
    fullpage_in();
            }
    }
})

Answer 1

Looking at the documentation for fullPage.js, I think you want to call the plugin's destroy method in your $destroy handler:

scope.$on("$destroy", function() {
     $.fn.fullpage.destroy('all');
});