0

我对 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 中？

4

1 回答 1

1

2018 年 11 月更新：

现在您可以使用Angular 的官方 fullPage.js 包装器。

如果您查看fullPage.js 常见问题解答，您会发现：

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

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

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

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

于 2015-02-18T10:54:09.570 回答