onPaginate not working

I cannot access the global variables inside the onPaginate method.

I am using EC6 standard.

Here is my controller ` class ContactsController { constructor($state, ContactsService, $q, $timeout) { this.selected = []; this.query = { order: ‘name’, limit: 5, page: 1 }; this.limitOptions = [5, 10, 15]; this.items = null; this.columnHeaders = null; this.ContactsService = ContactsService; this.progress = false; this.$q = $q; this.$timeout = $timeout; this.getContactsHeaders(); }

getContactsHeaders() {
    let promise = this.getHeaders();
    promise.then((headers) => {
        this.columnHeaders = headers;
        this.getItems();
    });
}

getHeaders(callback) {
    return this.$q((resolve, reject) => {
        resolve(this.ContactsService.getHeaders());
    });
}

getItems() {
    this.progress = true;
    let promise = this.getContacts();
    promise.then((contacts) => {
        this.items = contacts;
    }, (reason) => {
        console.log('Failed: ' + reason);
    });
};

getContacts(callback) {
    return this.$q((resolve, reject) => {
        resolve(this.ContactsService.getContacts(this.query));
        reject("Error Occured");
    });
}

onPaginate(page, limit) {
    console.log("query: " + this.query);
}

}

export default ContactsController;`

Here is the html <md-toolbar class="md-table-toolbar md-default"> <div class="md-toolbar-tools"> <span>Contacts</span> </div> </md-toolbar> <md-table-container ng-if="cc.items"> <table md-table md-row-select multiple ng-model="cc.selected" md-progress="cc.progress"> <thead md-head md-order="cc.query.order"> <tr md-row> <th md-column ng-repeat="column in cc.columnHeaders"> <span>{{column}}</span> </th> </tr> </thead> <tbody md-body> <tr md-row md-select="item" md-select-id="item.id" md-auto-select ng-repeat="item in cc.items.data"> <td md-cell>{{item.name}}</td> <td md-cell>{{item.reporting_person}}</td> <td md-cell>{{item.address}}</td> <td md-cell>{{item.email}}</td> </tr> </tbody> </table> </md-table-container> <md-table-pagination md-limit="cc.query.limit" md-limit-options="cc.limitOptions" md-page="cc.query.page" md-total="{{cc.items.count}}" md-on-paginate="cc.onPaginate" md-page-select="true"></md-table-pagination> </div>

Other methods works fine except when i try to go to next pages which uses the onPaginate mthod.

[BrunnerLivio]

I’m having the same issue. Thanks a lot for the workaround @iudelsmann. That will do it. But I really don’t like that you have to rely on this workaround. Why even expect a function as parameter on md-on-paginate event in the first place?

Why not use the ‘&’ attribute selector in mdTablePagination.js instead of ‘=’. More info

@daniel-nagy

[daniel-nagy]

TLDR: Binding directly to the method is more flexible and leads to less developer confusion.

@BrunnerLivio The reason I didn’t use & for binding to methods is because it becomes awkward to pass parameters to the method. When you use the & syntax you get a wrapper around the original expression that gets evaluated on the parent scope. That means I would have to overwrite the context and the developer would have to make sure they spell the parameters exactly as I define them.

For example, It would look something like this

// in the pagination directive
self.onPaginate({page: self.page, limit: self.limit});

<!-- in the developer's template -->
<!-- if page and limit are any other name this will fail -->
<md-table-pagination md-on-paginate="$ctrl.onPaginate(page, limit)"></md-table-pagination>

The alternative would be I pass nothing to the method and make the developer responsible for maintaining a reference to the page and limit within the scope of their controller.

// in the pagination directive
scope.eval('mdOnPaginate');

<!-- in the developer's template -->
<!-- now the developer can pass anything within the current scope -->
<md-table-pagination md-on-paginate="$ctrl.onPaginate($ctrl.page, $ctrl.limit)"></md-table-pagination>

If I were to rewrite it I would probably do this. Then the developer can pass anything visible within their current scope to the callback.

Update

There were also issues with calling the onPaginate callback before two way data binding had a chance to update. The result is the page and limit variables in the developer’s scope would still have the previous value. I would need to wrap the callback in a $timeout to wait until the next digest to call the onPaginate callback.