Chapter 8
};scope.selectNext = function() {
if ( !scope.noNext() ) {
scope.selectPage(scope.currentPage+1);
}
};
}The link function sets up a $watch property to create the pages array based on the
value of numPages. It adds the various helper functions to the isolated scope that
will be used in the directive's template.
Adding a selectPage callback to the directive
It would be useful to provide a function or an expression that is evaluated when
the page changes. We can do this by specifying a new attribute on the directive
and mapping it to the isolated scope using &.
<pagination
num-pages="tasks.pageCount"
current-page="tasks.currentPage"
on-select-page="selectPage(page)">
</pagination>What we are saying here is that whenever the selected page changes, the directive
should call the selectPage(page) function passing it to the new page number as
a parameter. Here is a test of this feature:
it('executes the onSelectPage expression when the current page
changes', inject(function($compile, $rootScope) {
$rootScope.selectPageHandler =
jasmine.createSpy('selectPageHandler');
element = $compile(
'<pagination num-pages="numPages" ' +
' current-page="currentPage" ' +
' on-select-page="selectPageHandler(page)">' +
'</pagination>')($rootScope);
$rootScope.$digest();
var page2 = element.find('li').eq(2).find('a').eq(0);
page2.click();
$rootScope.$digest();
expect($rootScope.selectPageHandler).toHaveBeenCalledWith(2);
}));