qipp-directives-paging

General

This directive is tied to the verticalPager service of the qipp-services-paging module and should be basically used on a button placed above or below the items to load.

Install

npm i qipp-directives-paging

Angular usage

The name of the resource to load and the cursor direction need to be provided as attributes:

Loading previous page of a given resource

<button qipp-paging-load="resource"
        qipp-paging-cursor="next">

Loading next page of a given resource

<button qipp-paging-load="resource"
        qipp-paging-cursor="next">

Replacing the data

By default, new data is prepended or appended in the resource. You can also modify this behaviour so that the data will be replaced:

<button qipp-paging-load="resource"
        qipp-paging-cursor="next"
        qipp-paging-replace="true">

Emitting an event

Setting the qipp-paging-state attribute to one given value will emit an event on the $rootScope containing the current enum properties of the resource:

<button qipp-paging-load="resource"
        qipp-paging-cursor="next"
        qipp-paging-state="notifications">

$rootScope.$on('notifications', function (event, response) {
    console.log(response)// { items: 20, limit: 10, page: 2, pages: 2 }
})

Counting

Setting the qipp-paging-counter attribute to a given scope variable name gives you a way to get the number of remaining items to load:

<button qipp-paging-load="resource"
        qipp-paging-cursor="next"
        qipp-paging-counter="counter">

console.log($scope.counter) // E.g. 10.

Tools

Linting with StandardJS

Please refer to the JavaScript Standard Style for general rules.

npm run lint

Unit testing with Karma

npm test

Requirements

Angular

• angular 1.4.3

Qipp modules

• qipp-services-paging 1.1.0

Licence

Released under the MIT license by qipp.