0

I am having some pretty odd behaviour with some model/view data in Angular. It is two issues really. In my controller, I have the following code, which is used to update some dates in the view. 

$scope.setCurrentDates = function () {

                var centreIndex = $scope.state.indexOfCentreDate,
                    centreIndexItem = $scope.state.allDays[centreIndex],
                    itemLeft = $scope.state.allDays[centreIndex - 1],
                    itemRight = $scope.state.allDays[centreIndex + 1];

                $timeout(function () {

                    $scope.state.currentDates.centre =  $scope.state.allDays[centreIndex].isoStringdate;
                    $scope.state.currentDates.left = itemLeft.isoStringdate;
                    $scope.state.currentDates.right = itemRight.isoStringdate;

                    $scope.state.isUpdatingDate = false;

                });
            };

And then in my view, I have the following as a right/progress nav arrow:

    <a>
        <span class="day">{{state.currentDates.right | navDate : 'dd'}}</span>
        <span class="month">{{state.currentDates.right | navDate : 'MMM'}}</span>
        <span class="year">{{state.currentDates.right  | navDate : 'yyyy' }}</span>

    </a>

$scope.setCurrentDates in the controller gets called with every click of the above nav.

So, the first issue is as follows:

When first loading the page, no text for the dates displays. However, when I inspect the element in dev tools, and for example increase the font size from 50px to 51px, the text then displays. As I click through the nav, the dates then do not update as they should in the view. BUT when I inspect the element again, and decrease the font size back to 50px, the dates then update ??? Bizarre. This happens with any one of the CSS properties for this element I modify.

They then update as they should with each click, but then stop updating again until I modify the CSS again.

At first I though this was a scope issue but I am not so sure as the dates update correctly when logged out in the console. So it must be related to Chrome/CSS rendering.

Further bizarreness is as per the attached. You can see the dev tools DOM, representing the correct values, including within the element #console which is represented by the black box rendered on screen.

enter image description here

It actually looks like this may be isolated to Chrome.

Any advice much appreciated.

Thanks,

Dave

iamdash
  • 449
  • 1
  • 3
  • 15
  • Strange. A jsfiddle would help. Also, I notice you are calling `$timeout` but without any delay, which is immediate invocation. Why? And is the `navDate` filter defined somewhere? – deitch Nov 27 '14 at 09:45
  • Thanks. I have just set it up in a standalone environment and it seems to be working, so i must be getting mangled elsewhere. – iamdash Nov 27 '14 at 10:16
  • So the jsfiddle works but not in the env? – deitch Nov 27 '14 at 10:18
  • Yeah, however, I have had to fake it quite a bit. Unfortunately to post everything in a jsFiddle and replicate exactly, I would need to add my whole module, as it consists of several elements that all come together. I will strip parts out bit by bit as part of a troubleshooting process. – iamdash Nov 27 '14 at 10:24
  • Just for the sake of testing, can you try to add `$scope.$apply();` at the end of your function (right after the `$timeout`)? – Omri Aharon Nov 27 '14 at 11:09
  • $timeout uses/calls $apply as far as I am aware, which is why I have excluded it. I have tried both though. – iamdash Nov 27 '14 at 13:15

1 Answers1

0

The solution to the Chrome rendering issue was found here: Google Fonts are not rendering on Google Chrome.

It comes down to Chrome being told to re-render the fonts.

Community
  • 1
  • 1
iamdash
  • 449
  • 1
  • 3
  • 15