[SOLVED] ng-show (or ng-class) not working with ui-view on Safari iOs for iPhone

ng-show (or ng-class) not working with ui-view on Safari iOs for iPhone

I spend so much time on this that I want to share the problem I had and how I fixed it.

I'm using angularjs 1.7 and I had a problem when testing on iPhone.

The problem I had is that the content of my website was not displayed and I could not understand why.

This is the two lines of codes where the problem was:

    <spinner ng-show="$ctrl.courseContentSpinner.show"></spinner>
    <div ng-show="!$ctrl.courseContentSpinner.show" id="content" class="content" ui-view>
    </div>

The logic just to either display a loading spinner or the content of the website. Sometimes (not all the times, it seemed a bit random), neither the spinner or the content will be displayed, in that case I could see that the value of $ctrl.courseContentSpinner.show was "false".

So why was the content not displayed ?

NB: there is ng-class in the title because the exact same problem happened if I use ng-class to add a css class that hide the component

Solution

I don't understand why it was not displayed but I can share the workaround that made it work, I just changed the code to be like this:

    <spinner name="$ctrl.courseContentSpinner.show"></spinner>
    <div ng-show="!$ctrl.courseContentSpinner.show" id="content" class="content">
        <div ui-view></div>
    </div>

And I never managed to reproduce the bug after this change. If someone has a real explanation for it, I'll be happy to hear it.