javascript - Fullpage.js 与 angular.js

Question

我在 angular-fullstac-generator 项目上实现 fullpage.js 时遇到问题。然后问题是我已经用 Bower 安装了它，然后我尝试像说明中那样使用它。为了测试，我将以下代码添加到index.html中，其中是 Controller 、指令和其他内容的脚本。我在 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>

和部分 View :

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

如何解决这个问题？感谢您的解答!

Answer 1

2018 年 11 月更新

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

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

<小时/>

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

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

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

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