Issue with ng-show and a-element rendering


#1

Hi!

I am working on an app that uses ionic but I have a two bugs that I haven’t been able to sort out:

  1. One is with ng-show - I usually hide objects until they have been fully loaded or something else happens. This works perfect in the browser or when emulating but when I run it on an iPhone it takes a while for the html-element to hide it self. Like this: https://www.youtube.com/watch?v=jUIVZucgkNM&feature=youtu.be

            <div ng-show="verifyNewAccountMessage">
                {{verifyNewAccountMessage}}
                <div class="socialLogin" style="margin-top: 60px;">
                    <ul class="socialLogin-buttons">
                        <li>
                            <a href="#/login" class="socialLogin--login">
                                <i class="ion-locked"></i>
                                <span>Login</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
    
  2. My second issue is that I have an a-element that is rendered twice on the phone but works perfectly when emulating. Like this: https://www.youtube.com/watch?v=S7HnkkejKj0&feature=youtu.be

    < a ng-href="#/app/users/{{chapter.author.id}}" >{{chapter.author.name}}< /a >

Any help would be super!


#2
  1. Try ng-cloak: https://docs.angularjs.org/api/ng/directive/ngCloak

  2. Not seen the second issue I’m afraid.


#3

Thanks! Will try that.


#4
  1. Don’t seem to work but I agree that ng-cloak should solve it…
  2. I solved this one. It seems that since the image is loaded afterwards, it creates a “shadow” of the text inside the a href. Never seen anything like it but when I set a fixed height so that they text didn’t wait for the image to be placed it solved it.