Fullpage.js 与 angular.js答案

【问题标题】：Fullpage.js with angular.jsFullpage.js 与 angular.js
【发布时间】：2015-01-28 14:26:13
【问题描述】：

我在 angular-fullstac-generator 项目上实现 fullpage.js 时遇到问题。然后问题是我已经用凉亭安装了它，然后我尝试按照说明使用它。为了测试，我将以下代码添加到 index.html 中，其中是控制器和指令以及其他内容的脚本。我在 jquery.js 之后发布了这个。

index.html：

<script>
  $(document).ready(function() {

    $('#fullpage').fullpage({
      //Navigation
      menu: false,
      anchors:['firstSlide', 'secondSlide'],
      navigation: false,
      navigationPosition: 'right',
      navigationTooltips: ['firstSlide', 'secondSlide'],
      slidesNavigation: true,
      slidesNavPosition: 'bottom',

      //Scrolling
      css3: true,
      scrollingSpeed: 700,
      autoScrolling: true,
      scrollBar: false,
      easing: 'easeInQuart',
      easingcss3: 'ease',
      loopBottom: false,
      loopTop: false,
      loopHorizontal: true,
      continuousVertical: false,
      normalScrollElements: '#element1, .element2',
      scrollOverflow: false,
      touchSensitivity: 15,
      normalScrollElementTouchThreshold: 5,

      //Accessibility
      keyboardScrolling: true,
      animateAnchor: true,
      recordHistory: true,

      //Design
      controlArrows: true,
      verticalCentered: true,
      resize : true,
      sectionsColor : ['#ccc', '#fff'],
      paddingTop: '3em',
      paddingBottom: '10px',
      fixedElements: '#header, .footer',
      responsive: 0,

      //Custom selectors
      sectionSelector: '.section',
      slideSelector: '.slide',

      //events
      onLeave: function(index, nextIndex, direction){},
      afterLoad: function(anchorLink, index){},
      afterRender: function(){},
      afterResize: function(){},
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
      onSlideLeave: function(anchorLink, index, slideIndex, direction){}
    });
  });
</script>

和局部视图：

<div id="fullpage">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

我得到了错误：

" fullPage: 错误！Fullpage.js 需要用选择器初始化。例如：$('#myContainer').fullpage();"

如何解决这个问题？谢谢回答！

【问题讨论】：

如果您使用 Angular.js 使用的 AJAX 技术，您可能会多次调用初始化。指向您网站的链接将有助于解决问题。

标签： javascript jquery angularjs fullpage.js

【解决方案1】：

2018 年 11 月更新

现在 fullPage.js 版本 3 可用于带有官方组件的 Angular： https://github.com/alvarotrigo/angular-fullpage

请注意，它也不再需要 jQuery！

如果您使用 Angular.js 使用的 AJAX 技术，您可能会多次调用初始化。指向您的网站的链接将有助于解决这个问题。

您可能想要使用 fullPage.js 提供的函数 reBuild 和 destroy。

或者，否则，在您的站点中使用普通链接而不是 AJAX 调用。

别忘了检查this topics in fullPage.js forum，它们可能对你有帮助。

【讨论】：