Question

我在angular.js中有点新，我想知道如何正确地将fullpage.js实现为angular.js。我试图添加整页作为示例......

此代码直接进入我想用于fullpage.js的控制器

$('#fullpage').fullpage({
    sectionsColor: ['#21f7ff', '#bdcc4b', '#fcae49'],
});

但问题是当我把这个代码放到控制器中时我不会再认识其他......（其他功能点击）

我在控制器中的实现：

    'use strict';

    angular.module('APP')
        .controller('MainCtrl', function ($scope,Auth) {

         $('#fullpage').fullpage({
                sectionsColor: ['#21f7ff', '#bdcc4b', '#fcae49'],
         });

    $scope.moveUp = function(){
       $.fn.fullpage.moveSectionUp();
    };

   $scope.moveDown = function(){
      $.fn.fullpage.moveSectionDown();
   };

    });

观点：

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

       <button class="button" ng-click="moveDown()">Down</button>
    </div>
    <div class="section">
       <button class="button" ng-click="moveUp()"> Up </button>
    </div>
</div>

我使用angular-fullastack-generator进行项目启动，所以这是局部视图。

我的一般问题是如何正确地将fullpage.js实现为angular.js？

Answer 1

2018年11月更新：

现在您可以使用official fullPage.js wrapper for Angular。

如果你看一下fullPage.js FAQs，你会发现this：

使用fullPage.js时，我的javascript / jQuery事件不再起作用

简答：如果您在fullPage.js初始化中使用verticalCentered：true或overflowScroll：true等选项，那么您将把选择器视为动态元素并使用委托。（通过使用来自jQuery的on之类的东西）。另一种选择是在fullpage.js的afterRender回调中添加您的代码

说明：如果您使用的选项如verticalCentered：true或overflowScroll：true of fullPage.js，您的内容将被包装在其他元素中，从而更改其在网站DOM结构中的位置。这样，您的内容将被视为＆＃34;动态添加的内容＆＃34;并且大多数插件需要最初在网站上执行任务的内容。使用afterRender回调初始化插件，fullPage.js确保仅在fullPage.js停止更改站点的DOM结构时才初始化它们。

这意味着您需要为您的活动使用委托（例如click）或将其添加到afterRender回调中。

将fullpage.js实现为angular.js

1 个答案:

2018年11月更新：