Mastering Web Application

Building Your Own Directives

expect($scope.currentPage).toBe(2);

});

it('does not change the current page on "next" click if already at

last page', function() {

var next = lis().eq(-1).find('a');

$scope.currentPage = 5;

$scope.$digest();

next.click();

$scope.$digest();

expect($scope.currentPage).toBe(5);

});

it('changes the number of items when numPages changes', function() {

$scope.numPages = 8;

$scope.$digest();

expect(lis().length).toBe(10);

expect(lis().eq(0).text()).toBe('Previous');

expect(lis().eq(-1).text()).toBe('Next');

});

});

Using an HTML template in a directive

This widget requires that we generate some HTML tags to replace the directive. The
simplest way to do this is to use a template for the directive. Here is the mark-up for
this template:

<div class="pagination"><ul>

<li ng-class="{disabled: noPrevious()}">

<a ng-click="selectPrevious()">Previous</a>

</li>

<li ng-repeat="page in pages"

ng-class="{active: isActive(page)}">

<a ng-click="selectPage(page)">{{page}}</a>

</li>

<li ng-class="{disabled: noNext()}">

<a ng-click="selectNext()">Next</a>

</li>

</ul></div>