Pagination links conflicts with routing in AngularJS

[mszmida]

When I click in pagination links Angular routes mi to '/' path of my application. This is due to href="#" attribute in links.

Why this problem does not occur on ngTasty homepage example of grid?

[Zizzamia]

Your app does routing by Angular ( by $routeProvider ) or by Server side?
Did you set in your Angular config $locationProvider.html5Mode(true);?
If you can share the config part of your app I can try to recreate the issue.

Thank you for reporting this issue.

[mszmida]

Thanks for response.

I am only the one of contributors, but we are using for routing AngularUI Router:
https://github.com/angular-ui/ui-router

When I set in one of our module html5mode, pagination started to work like in example in your ngTasty homepage. In spite of all this change behaviour of whole routing in application.

Config part of main app:

angular.module('admin', dependencies).config([
    '$stateProvider',
    '$urlRouterProvider',
    'RestangularProvider',
    '$translateProvider',
    '$translatePartialLoaderProvider',
    function($stateProvider, $urlRouterProvider, RestangularProvider, $translateProvider, $translatePartialLoaderProvider) {
        // ...
        // For any unmatched url, redirect to /state1
        $urlRouterProvider.otherwise('/');

        // Now set up the states
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: viewPath + 'home.html'
            });
        // ...
    }
]).run()

Config part of content module:

angular.module('admin.content', [])
    .config([
        '$stateProvider',
        '$urlRouterProvider',
        'RestangularProvider',
        '$locationProvider',
        function($stateProvider, $urlRouterProvider, RestangularProvider, $locationProvider) {
            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });
    // ...
            // Now set up the states
            $stateProvider
                .state('content', {
                    url: '/content',
                    templateUrl: viewPath + 'index.html',
                    controller: 'ContentCtrl'
                })
                .state('content.list', {
                    url: '/list',
                    views: {
                        '': {
                            templateUrl: viewPath + 'list.html'
                        },
                        'quickNav': {
                            templateUrl: viewPath + 'quickNav.html'
                        },
                        'quickSidebarLeft': {
                            templateUrl: viewPath + 'categories.html'
                        }
                    }
                })
                .state('content.show', {
                    url: '/{contentId}/show',
                    templateUrl: viewPath + 'show.html'
                })
                .state('content.add', {
                    url: '/add',
                    templateUrl: viewPath + 'add.html',
                    controller: 'ContentCtrl'
                });
        }
    ])

I hope it helps ;-)

If I made language mistakes, correct me ;-)

[aganglada]

I'm having the same issue and I just ask people from angularjs repo. I'll have you in touch.
angular/angular.js#10232

[Zizzamia]

They just said it's our problem if is not working ahaha.
Btw the main point for this issue it's understand if is better keep this style

<a href="#" ng-click="page.previous()">&laquo;</a>

or do something like this

<a href ng-click="page.previous()">&laquo;</a>

I think the second could work better, here the pagination implementation of angular bootstrap
https://github.com/angular-ui/bootstrap/blob/master/template/pagination/pagination.html

[aganglada]

So it will be changed on v0.3.3? And when will be released? I think it will be good to add an option to set a custom template for the pagination, some custom tables like ng-table does the same thing :)

[Zizzamia]

I double check the code, and yes... "style": { "width": true } it's a simple hack to avoid that behavior.
Good catch!
As you see on the CHANGELOG https://github.com/Zizzamia/ng-tasty/blob/master/CHANGELOG.md I use to release a new version every 15/20 days.

For the custom template for the pagination it's a good idea.
If you want help, by creating feature request task or sending Pull Request could will be awesome :)

[aganglada]

if (I have time)
{
     I promise.then(help you)
}

Too much code every day :P

PS: Pagination is very important for me, so if we can do a release as soon we have this feature it will be great.

[Zizzamia]

@MaciejSzmida Don't forget to give me a ⭐ :)

[mszmida]

Why not? :P Here you go ⭐ ;-)

[Zizzamia]

👍