2016-04-05 20 views
1

JHipsterを使用してプロジェクトを生成し、エンティティの1つがpagination()を使用しています。すべてうまくいっていますが、ページサイズオプションとページネーションを含めたいと思います。しかし、私はUIのブートストラップのドキュメントでそれについてのオプションが表示されません。したがって、私はカスタムディレクティブにuib-paginationディレクティブをラップしました。ここでuib-paginationが別のディレクティブでラップされている場合、AngularJSテーブルのデータは更新されませんか?

はディレクティブです:私は例えば、私のカスタムディレクティブの項目をクリックすると、ページ番号や設定ページ

<div class="row row-sm-height" id="pagination_div"> 
    <div class="col-md-6 pagination_panel col-xs-12" id="pagination_left"> 
     <uib-pagination class="pagination-md" total-items="totalItems" 
      ng-model="page" ng-change="loadAll()" rotate="false" 
      boundary-links="true" boundary-link-numbers="true" max-size="7"></uib-pagination> 
    </div> 
    <div class="col-md-6 pagination_panel col-xs-12" id="pagination_right"> 
     <div class="row pagination_panel_row"> 
      <div class="col-xs-4 pagination_panel_item"> 
       <label>Items Per Page:</label> 
      </div> 
      <div class="col-xs-4 pagination_panel_item"> 
       <input class="form-control" placeholder="Items per Page" 
        type="number" min="5" max="100" ng-model="newItemPerPage"></input> 
      </div> 
      <div class="col-xs-4 pagination_panel_item"> 
       <button type="button" class="btn btn-info" 
        ng-click="setItemPerPage()">Set</button> 
      </div> 
     </div> 
    </div> 
</div> 

:ここ

'use strict'; 
//angularJS directive for Spring Pagination with page size control. 

angular.module('myApp') 
    .directive('springPagination', function(){ 
     return{ 
      restrict: 'AE', 
      replace: true, 
      scope: true, 
      templateUrl: 'scripts/components/pagination/spring-pagination.html', 
      controller: 'my_entity_controller' 
     }; 
    }) 

は、テンプレート(HTML)でありますサイズを50に設定すると、AngularJSは新しい値を取得し、REST要求をサーバーに送信し、サーバー応答に新しいデータを送信することができます。しかし、私のテーブルは変更なしで同じページのままです。

誰かから指示をお願いできますか?カスタムディレクティブがないとデータが更新されないのはなぜですか?おそらく、ui.bootstrap.paginationの組み込みオプションがページサイズを表示するので、カスタムディレクティブを作成する必要がなくなり、面倒さが少なくなります。

答えて

1

愚かな私。私のアプローチは有効だとわかるが、ブール値にアポストロフィを使うのは忘れてしまった。だから、基本的には:

scope: true 

は次のようになります。あまりにもアポストロフィなしに真

scope: 'true' 

私は

スコープを使用する他のチュートリアルを見てかなり確信しています。解決しかしまあ、少なくとも私の問題は...

も、に必要はありませんオプション(まあ、少なくとも私のユースケースのために、私はする必要はありませんを交換コントローラを置きます)私は私のディレクティブが、このカスタムディレクティブを適用したhtmlと同じコントローラを共有したいからです。

関連する問題