0

同じウィンドウ内でドキュメントのさまざまなページを互いの下に表示する単一ページのページ付けアプリを設計しようとしています。次の要件を満たす必要があります。

  • ユーザーが次/前/... をクリックして移動するページを送信できるページネーション ツールバー。
  • ページが送信された後、ウィンドウはドキュメントの右側のページにスクロールします
  • ユーザーが手動でスクロールすると、現在のページが自動的に更新されます

私はいくつかの異なるものを試しましたが、結果に本当に満足することはありませんでした. これは私が解決策を見る方法です：

アプリは 1 つのファクトリで構成されます。

DocumentFactory : ドキュメントの現在のページを格納し、次のメソッドがあります。

  • setPage(page): ファクトリにページを設定して、さまざまなコントローラー/ディレクティブがこのページを使用できるようにします
  • ブロードキャスト（pageChanged）：ページが変更された後にイベントをブロードキャストするため、コントローラー/ディレクティブはこれをリッスンして適切に反応できます

2 つのコントローラー:

  1. PaginationCtrl[DocumentFactory] ​​: ページネーション ツールバー コントローラーは、DocumentFactory の setPage(メソッド) を呼び出してページを更新し、pageChange イベントをリッスンして、ページが他のコントローラー/ディレクティブで変更されたときに独自のスコープを更新します。
  2. DocumentCtrl : ドキュメントのコントローラ

1 ディレクティブ:

Page[DocumentFactory] ​​: ドキュメント内のページに似ており、次のメソッド/リスナーがあります

  • scrollToPage(): currentPage がこのページ番号と等しい場合 (属性としてディレクティブに追加され、このページまでスクロールします)
  • このページが表示されていて、表示されているすべてのページのウィンドウで一番上にある場合は、DocumentFactory の setPage(page) メソッドを呼び出して、現在のページをこのページの番号に変更します。

これは、ページをサービスに保存し、他のコントローラー/ディレクティブのイベントを使用してリッスンするための正しいアプローチですか?

イベントをリッスンするディレクティブにコントローラーを作成するか、リンク関数に $watch を追加して現在のページ (親 Ctrl スコープから継承) の変更を監視する必要がありますか?

ページ番号がページ変更時の現在のページと等しいかどうかを各ディレクティブに確認させる必要がありますか、それとも DocumentCtrl を正しい要素にスクロールさせる必要がありますか?

4

1 に答える 1

2

ファクトリを呼び出すコントローラーに既にメソッドがあるため、ディレクティブで「&」分離スコープを使用して、必要なメソッドを呼び出す必要があります。

コントローラーでメソッドを作成する

var app = angular.module('app', []);

app.controller("Ctrl", function ($scope) {

    $scope.goForward = function (){
        alert("call to the paginator page up service");
    };
    $scope.goBack = function (){
        alert("call to the paginator page down service");
    };

});

次に、ディレクティブで「&」スコープ アイソレートを設定します。

app.directive('paginator', function (){
    return{
        restrict: 'E',
        scope:{
            forward: '&',
            back: '&'
        },
        template: '<button ng-click="forward()">Page up</button>' +
                  '<button ng-click="back()">Page down</button>'
    }

});

最後に、ディレクティブで定義されている属性を使用して、ディレクティブをページに追加します。

<paginator forward="goForward()" back="goBack()"></paginator>

Plnkr のコードは次のとおりです。

HTH

于 2013-09-09T08:35:37.320 に答える