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-fullack-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のonなどを使用して)。もう 1 つのオプションは、fullpage.js のafterRenderコールバックにコードを追加することです。

説明: fullPage.js の verticalCentered:true や overflowScroll:true などのオプションを使用している場合、コンテンツは他の要素内にラップされ、サイトの DOM 構造内での位置が変更されます。このように、あなたのコンテンツは「動的に追加されたコンテンツ」と見なされ、ほとんどのプラグインはタスクを実行するためにコンテンツが元々サイトにある必要があります。afterRender コールバックを使用してプラグインを初期化すると、fullPage.js がサイトの DOM 構造の変更を停止した場合にのみ、fullPage.js はプラグインを初期化します。

つまり、イベント ( など) に委任を使用するか、それらをコールバックclickに追加する必要があります。afterRender

于 2015-02-18T10:54:09.570 に答える