angularjs - 在 Angular 应用程序中多次初始化 fullpage.js

Question

我正在构建一个在几个页面中使用 fullpage.js 的 Angular 应用程序。目前，我正在使用模板中的自定义指令初始化 fullpage(例如 $('#this-routes-fullpage').fullpage({ options... }) )，用于每个使用它的路线。在每个自定义指令的末尾，我调用

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

当我从一个使用该插件的页面导航到另一个不使用它的页面，然后返回到第三个页面时，这会按我的预期工作(插件被销毁并在下次遇到时重新初始化)确实利用它。但是，如果省略该中间步骤并且我直接从一个使用 fullpage 的路由导航到也使用它的第二个，则插件无法正确初始化。我的意思是控件不起作用。

这让我觉得有一个更好的地方可以让我调用可以适当利用 Angular 事件的 destroy 函数。谁能帮我解决这个问题？？谢谢!

Answer 1

更新:

现在您可以使用 the official Angular component for fullPage.js .

无论何时何地初始化它，只需销毁它。就在初始化之前，例如:

//destroying
if (typeof $.fn.fullpage.destroy == 'function') { 
    $.fn.fullpage.destroy('all');
}

//initializing 
$('#fullpage').fullpage();

或者您可以在检查 fullPage.js 添加到您的 html 元素的类/标志之前检查它是否已初始化(假设这不会在您的 ajax 调用中被修改)。

//destroying
if($('html').hasClass('fp-enabled')){
    $.fn.fullpage.destroy('all');
}

//initializing 
 $('#fullpage').fullpage();