1

ページング コントロール (Twitter ブートストラップ スタイル) の HTML 形式のコードを出力するディレクティブを作成しようとしています。このディレクティブは、コントローラーのスコープから現在のページと合計ページを取得する必要があり、ページング リンクがクリックされると、ページを変更するためのコントローラーの関数 (URL を作成し、$location を呼び出してページを変更します)。

私は優れた YouTube angularjs ビデオ (http://www.youtube.com/watch?v=nKJDHnXaKTY) の多くを見てきましたが、この特定の複雑なシナリオをカバーしているようには見えません。

どんな助けでも素晴らしいでしょう！

これをより明確にするjsfiddleは次のとおりです。

http://jsfiddle.net/philjones88/dVFDT/

うまくいかないのは、パラメーターを渡すことです。次のようになります。

changing page to: undefined
4

3 に答える 3

2

ディレクティブに changePage 呼び出しを追加します (必要な場所にないことはわかっています)。親スコープの changePage を同じパラメーターで呼び出すようにします。

$scope.changePage = function(index){
    console.log("running changePage");
    $scope.$parent.changePage(index); //might want to check if the parent scope has this too
}

別のヒントとして、ディレクティブでは、送信される変数の前に $ を使用しないでください。この場合、$scope、$element、$attrs になります。コントローラーのスコープの前に表示される $ (リンク関数ではありません) は、それが注入されていることを知らせるためにあります。リンクコントローラーに注入されていません。たとえば、ここに：

app.directive("pager", function ($injector1, $injector2) {

これは、注入されたパラメーターが入る場所であり、それらの 2 つを区別できるようにする必要があります。これが少し軌道から外れたことに気づきました。changePage に対する提案が、あなたが探しているものであることを願っています。

編集：更新されたフィドルhttp://jsfiddle.net/dVFDT/48/

将来の検索者向けに修正された回答：次のようにクリックメソッドを介して渡していた関数：

..... click="changePage()".....

次のように変更する必要があります。

..... click="changePage".....

これは、関数呼び出しではなく、関数を渡すことを意味します。これは、ディレクティブで、changePage コールバックを接続したときに、次のようなインデックスで関数を呼び出していたことを意味します。

changePage()(1)

それがあなたが未定義になっていた理由です。

于 2012-12-23T14:26:43.127 に答える
0

完全にはわかりませんが、ディレクティブの最後でコントローラーの関数を実行したいですか?

試す：

<div class="pagination">
   <pager current-page="currentPage" total-pages="totalPages" query="query" callback="changePage()"></pager>
</div>
于 2012-12-23T12:37:12.357 に答える
0

この質問は少し古いと思いますが、実際には、再コンパイルや親スコープの呼び出しを必要としない、これを解決する別の方法があります。ただし、わずかに異なる方法でディレクティブ内からメソッドを呼び出す必要があります。

ここでフィドルを見ることができます：フィドル

最も興味深い行は、テンプレート宣言にあります。onClick の呼び出しでは、値だけでなくオブジェクトを渡す必要があります。

    template: 
    "<div ng:repeat='i in [] | range:totalPages'> " +
        "<a ng:click='onClick({page: i + 1})'>Page {{i + 1}}</a>" +
    "</div>",

これは、Gloopyからのこの回答のフィルターも使用して、nで回数を反復しng:repeatます。これにより、すべてのバインディングがテンプレートで発生します。

于 2013-05-14T20:29:11.713 に答える