CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrappagination
BioHazard
BioHazard

Reputation: 73

AngularJS table data not updating when uib-pagination is wrapped in another directive?

I generated my project using JHipster and one of my entities uses pagination (). Everything is working fine, however I want to include a page size option along with pagination. But I don't see any option for that in UI Bootstrap documentation. Therefore I wrapped the uib-pagination directive in a custom directive.

Here is the directive:

'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'
        };
    })

Here is the template (HTML):

<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>

When i click on the item on my custom directive, for example the page number or set page size to 50, AngularJS is able to get the new value and send a REST request to the server and the server response with new data. However, my table remains the same page without any changes.

Can someone give me some directions please? Why is my data not updating like it supposed to without the custom directive? Perhaps there is a build-in option for ui.bootstrap.pagination to display page size so that I don't need to create a custom directive so that there is less hassle??

Upvotes: 2

Views: 490

Answers (1)

BioHazard
BioHazard

Reputation: 73

Silly me. Turns out my approach is doable, but I just forgot to use apostrophe on the boolean. So basically:

 scope: true

should be:

 scope: 'true'

I am pretty sure I saw other tutorials which use

scope: true

without the apostrophe too. But oh well, at least my problem is solved...

also, there is no need to put controller and replace option (well, at least for my use case i don't need to) because I want my directive to share the same controller from the html that I applied this custom directive to.

Upvotes: 1

Related Questions