在角度应用程序中多次初始化fullpage.js [英] Initializing fullpage.js multiple times in an angular app

问题描述

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

I am building an Angular app that uses fullpage.js in a few of its pages. Currently, I am initializing fullpage (e.g. $('#this-routes-fullpage').fullpage({ options... }) ) using a custom directive within the template for each route where it is getting used. At the end of each of these custom directives, I'm calling

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

当我从一个使用该插件的页面导航到一个不使用该插件的页面，然后返回到一个利用它的第三页.但是，如果省略了中间步骤，而我直接从使用整页的一条路线导航到也使用整页的另一条路线，那么插件将无法正确初始化.我的意思是这些控件将无法正常工作.

This works as I expect (the plugin is destroyed and reinitialized the next time it is encountered) when I am navigating from one page that utilizes the plugin, to another page that doesn't utilize it, and then back on to a third page that does utilize it. However, if that intermediate step is left out and I navigate directly from one route that utilizes fullpage to a second that also utilizes it, the plugin doesn't initialize properly. By which I mean that the controls won't work.

这使我认为我有一个更好的位置来调用destroy函数，该函数将充分利用Angular事件.谁能帮我这个忙吗?谢谢！

This makes me think that there is a better place for me to call the destroy function that will take proper advantage of Angular events. Can anyone help me out with this?? Thanks!

推荐答案

更新:

现在，您可以使用 fullPage.js的官方Angular组件.

Update:

Now you can make use of the official Angular component for fullPage.js.

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

Just destroy it whenever and wherever you initialize it. Just before the initialization, for example:

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

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

或者您可以只在检查fullPage.js添加到html元素的类/标志之前检查它是否已初始化(假设在ajax调用中未对其进行修改).

Or you can just check if it was initialized before checking the class/flag that fullPage.js adds to your html element (supposing this doesn't get modified in your ajax calls).

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

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

这篇关于在角度应用程序中多次初始化fullpage.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！