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

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

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

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

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

Update:

现在您可以使用fullPage.js 的官方 Angular 组件 https://alvarotrigo.com/angular-fullpage/.

无论何时何地初始化它，只要销毁它即可。在初始化之前，例如：

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