ng-style not refreshing dynamically

Question

I have an md-card with this code:

<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>

pageWidth is a $scope variable bound to $(window).width(). Here is the code for that:

$scope.pageWidth = $(window).width();
$(window).resize(() => {
    $scope.pageWidth = $(window).width();
    console.log('page width: ' + $scope.pageWidth);
})
$(document).ready(() => {
    $(window).resize(() => {
        $scope.pageWidth = $(window).width();
        console.log('page width: ' + $scope.pageWidth);
    })
})

The style is applied correctly when the page loads, but not when I manually resize the page. As you can see in the second code block, I added a console.log statement to the handlers, so I know that $scope.pageWidth is updating with every pixel of width I change. However, the width of the md-card never changes from one to the other. What's going on here?

And before you mark this as a duplicate, people have asked this before, but not in a way where their answers apply to my situation.

Answer 1

Sorry, I'm not posting an answer for this other then that you have a typo in first line should be:

<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>

But from what I can see what you are doing can be done much more efficiently using normal CSS - no need to put javascript logic for that. Also I would advise using AngularJS $window (you will need to inject it) instead of global window object and I'm against using Jquery in Angular applications and Jquery DOM manipulations unless it's really really (and I will say again really) necessary.

Check this link about media queries:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

You will see that you can easily check max-width and max-height, also min-width/height and tons of different things that might solve your problems with pure CSS and no need for Javascript/Jquery mixed with AngularJS.

Your CSS would be something like:

@media screen and (max-width: 900px) {
  md-card {
    width: 80vw;
  }
}
@media screen and (min-width: 901px) {
  md-card {
    width: 40vw;
  }
}

Of course this would be globally on all md-card elements if you need it more specific add classes on each element and change media queries.