A custom directive named 'myPagination' has been implemented, which encapsulates the functionality of the UI Bootstrap's pagination directive.
angular.module('my-module')
.directive('myPagination', ['$filter', '$window', function ($filter, $window) {
return {
restrict: 'EA',
scope: {
itemsPerPage: '=',
totalItems: '=',
page: '='
},
link: function (scope, element, attrs) {
scope.hiddenElement = true;
var totalMargin = 200, widthByElement = 41;
scope.getWindowDimensions = function () {
return {
'w': element.width()
};
};
scope.$watch(scope.getWindowDimensions, function (newWidth, oldWidth) {
// calculate how many page buttons fit in the pagination horizontal bar
scope.maxSize = parseInt($filter('number')((newWidth.w - totalMargin) / widthByElement, 0));
}, true);
angular.element($window).bind('resize', function () {
// "$digest already in progress" thrown by the following line
scope.$apply();
});
},
template: '<div class="text-center paginationSelfCare" ng-show="totalItems > itemsPerPage">' +
'<pagination ng-show="totalItems/itemsPerPage <= maxSize" total-items="totalItems" items-per-page="itemsPerPage" ng-model="page" max-size="maxSize" class="pagination pagination-sm" ></pagination>' +
'<pagination ng-show="totalItems/itemsPerPage > maxSize" total-items="totalItems" boundary-links="true" direction-links="true" previous-text="<" next-text=">" first-text="<<" last-text=">>" items-per-page="itemsPerPage" ng-model="page" max-size="maxSize" class="pagination pagination-sm" ></pagination>' +
'</div>'
};
}]);
In case this directive is active in one browser tab (A), and a switch to another tab (B) occurs, then upon returning to tab A, an error message appears in the browser console:
Error: [$rootScope:inprog] $digest already in progress http://errors.angularjs.org/1.4.4/$rootScope/inprog?p0=%24digest minErr/<@ beginPhase@ $RootScopeProvider/this.$gethttp://127.0.0.1:9000/bower_components/angular/angular.js:16014:11 .link/<@
The problematic line marked as a comment above in `pagination.js` can be found at line 30:
scope.$apply();
To address this issue to avoid errors like `$digest already in progress`, it would be advisable to perform certain checks before calling `scope.$apply();`. This scenario is based on Angular version 1.4.4 being utilized.