0

I'm working in implementing a responsive pagination component for angularjs through a custom directive. The idea is for the pager to show fewer pages for small screens and more pages for large screens so if it's showing 20 pages on my desktop and I resize the browser window (make it very small), the component should adjust and show fewer pages.

The way I want to do this is by listening to the resize event on the window object and check the width when there's a change. Depending on what the width is, I want to update the directive's controller list of pages so it shows fewer pages. I have been trying this on the directive's link:

$(window).resize(function(){
    var width = $(window).width();
    console.log(width);
    if (width > 600) {
        paginationCtrl.message='hello';
        maxSize = 3;
        console.log("here");
    }
    else{
        paginationCtrl.message='bye';
    }
    console.debug(paginationCtrl);
}
);

The problem is, I don't see the message change on the page when I change the screen size. I'm thinking maybe link is not the best place to do this. I have a plunkr with the code here: http://plnkr.co/edit/eIj2HbJluoleBk44Knfe?p=preview

jarz
  • 732
  • 7
  • 20
  • Your code looks fine when it's run at one of the ranges specified, but the resize may need to be different. Here's an answer regarding that. http://stackoverflow.com/questions/21626357/angularjs-event-on-window-innerwidth-size-change – aredzko Aug 19 '15 at 19:08
  • 1
    an time you change scope in events outside of angular need to tell angular to run a digest to update view – charlietfl Aug 19 '15 at 19:20
  • Thanks @charlietfl, that worked. I didn't end up doing it like that but it took me closer to a solution that works for what I want (using angular's $timeout service). – jarz Aug 20 '15 at 13:33

0 Answers0