javascript - Override the default pagination template of ui-bootstrap -

i using angularjs show pagination. making changes on default pagination template. html:

<ul uib-pagination ng-model="source_pagination.current" template-url="pagination.html" total-items="source_pagination.total_pages" items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm" force-ellipses="true" direction-links="false" ng-change="source_page_changed()"></ul> ...        <script id="pagination.html" type="text/ng-template">             <ul class="pagination">                 <li ng-if="boundarylinks" ng-class="{disabled: noprevious()}">                     <a href ng-click="selectpage(1)" title="first page">                         <span class="glyphicon glyphicon-fast-backward"></span>                     </a>                 </li>                 <li ng-if="directionlinks" ng-class="{disabled: noprevious()}">                     <a href ng-click="selectpage(page - 1)" title="previous page">                         <span class="glyphicon glyphicon-step-backward"></span>                     </a>                 </li>                 <li ng-repeat="page in pages track $index" ng-class="{active: page.active}">                     <a href ng-click="selectpage(page.number)" ng-class="{highlight: shouldhighlightpage(page.number)}">                         {{page.text}}                     </a>                 </li>                 <li ng-if="directionlinks" ng-class="{disabled: nonext()}"><a href ng-click="selectpage(page + 1)" title="next page"><span class="glyphicon glyphicon-step-forward"></span></a></li>                 <li ng-if="boundarylinks" ng-class="{disabled: nonext()}"><a href ng-click="$scope.changepage('last')" title="last page"><span class="glyphicon glyphicon-fast-forward"></span> </a></li>             </ul>         </script> 

i modified section:

<li ng-repeat="page in pages track $index" ng-class="{active: page.active}">     <a href ng-click="selectpage(page.number)" ng-class="{highlight: shouldhighlightpage(page.number)}">                             {{page.text}}     </a> </li> 

and added class-condition {highlight: shouldhighlightpage(page.number)}. code should call function shouldhighlightpage(pagenum) located in controller:

$scope.shouldhighlightpage = function (pagenum) {     return true; } 

so pages should contain class highlight. but, function never called. (checked adding breakpoint in function). pages presented without highlight class.

what i'm doing wrong?

thank you.

okay, got issue here.

the uib-pagination directive creates isolated scope. see here: https://github.com/angular-ui/bootstrap/blob/2.1.3/src/pagination/pagination.js#l126

and docs:

scope

{...} (an object hash): new "isolate" scope created directive's element. 'isolate' scope differs normal scope in not prototypically inherit parent scope. useful when creating reusable components, should not accidentally read or modify data in parent scope.

that means, method shouldhighlightpage not available in scope of overridden template.

one immediate solution (not recommended, getting cleaner solution) register method in $rootscope:

$rootscope.shouldhighlightpage = function (pagenum) {     return true; } 

to fix problem, add custom directive:

myapp.directive('uibcustompagination', function () {     return {         restrict: 'a',         require: 'uibpagination',         link: function ($scope, $element, $attr, uibpaginationctrl) {             uibpaginationctrl.shouldhighlightpage = function (pagenum) {                 return true;             };         }     } }); 

this directive injecting method controller of uib-pagination directive can available in template.

now, apply uib-custom-pagination directive ul element:

<ul uib-pagination uib-custom-pagination ng-model="source_pagination.current"     template-url="pagination.html" total-items="source_pagination.total_pages"     items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm"     force-ellipses="true" direction-links="false" ng-change="source_page_changed()"></ul>