href route template attribute

[Swimburger]

Currently the pagination controls have anchors with an empty href in them. You can change this by overriding the template, but it would be nice to have an attribute where you can pass in a route. Example:

<dir-pagination-controls href-template="/blog/page/:pageNumber"></dir-pagination-controls>

In this case people could just use this attribute instead of the callback if they only change the location in the callback. But for me the main benefit is from a SEO standpoint, so browsers can follow the links.

[michaelbromley]

Hi,

Thanks for the suggestion. I suspect, as you mentioned, customising the template would be the way to go with this. I've not had a feature request for something like this before now (and not needed it myself), so I prefer to err on the side of keeping the module lean and enabling this kind of specific use-case with custom templating.

To be clear - would making a custom template solve this for you, including the SEO angle? I imagine it would just be a case of replacing the currently-empty href="" in the template with href="/blog/page/{{pageNumber}}"?

Or then is the issue that different instances of the pagination controls would need whole new custom templates if the href route is different? In that case, I get where you are coming from. How are you handling this currently?

[Swimburger]

Yes, right now I'm doing the following. For my blog page.

<ul class="pagination" ng-if="1 < pages.length || !autoHide">
  <li ng-if="boundaryLinks" class="boundary-link" ng-class="{ disabled : pagination.current == 1 }">
    <a ng-href="/blog/page/1">&laquo;</a>
  </li>
  <li ng-if="directionLinks" class="direction-link" ng-class="{ disabled : pagination.current == 1 }">
    <a ng-href="/blog/page/{{pagination.current - 1}}">&lsaquo;</a>
  </li>
  <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
    <a ng-href="/blog/page/{{pageNumber}}">{{ pageNumber }}</a>
  </li>

  <li ng-if="directionLinks" class="direction-link" ng-class="{ disabled : pagination.current == pagination.last }">
    <a ng-href="/blog/page/{{pagination.current + 1}}">&rsaquo;</a>
  </li>
  <li ng-if="boundaryLinks" class="boundary-link" ng-class="{ disabled : pagination.current == pagination.last }">
    <a ng-href="/blog/page/{{pagination.last}}">&raquo;</a>
    {{test}}
  </li>
</ul>

And the following for my projects page.

<ul class="pagination" ng-if="1 < pages.length || !autoHide">
  <li ng-if="boundaryLinks" class="boundary-link" ng-class="{ disabled : pagination.current == 1 }">
    <a ng-href="/projects/page/1">&laquo;</a>
  </li>
  <li ng-if="directionLinks" class="direction-link" ng-class="{ disabled : pagination.current == 1 }">
    <a ng-href="/projects/page/{{pagination.current - 1}}">&lsaquo;</a>
  </li>
  <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
    <a ng-href="/projects/page/{{pageNumber}}">{{ pageNumber }}</a>
  </li>

  <li ng-if="directionLinks" class="direction-link" ng-class="{ disabled : pagination.current == pagination.last }">
    <a ng-href="/projects/page/{{pagination.current + 1}}">&rsaquo;</a>
  </li>
  <li ng-if="boundaryLinks" class="boundary-link" ng-class="{ disabled : pagination.current == pagination.last }">
    <a ng-href="/projects/page/{{pagination.last}}">&raquo;</a>
    {{test}}
  </li>
</ul>

(disregard the {{test}}, I forgot to take it out) This works perfectly, though as a programmer I would've like to have it DRY'er like me feature request, but I'm fine with leaving it like this now. pagination view folder blog view projects view

[elmer-t]

Is it possible to add scope parameters to the href? I'm using async paging with a filtered list. I would like to add the filtering parameters to the href so that when a user navigates forward and backward between list and details pages, the back-navigation works as intended. Right now navigating back to the list always jumps to page 1.