Hidden content shown at first


#1

Hi

I got a really small question. I’m trying to hide a div. But when I click the tab, I see the hidden div for 1 second & then it’s hidden. I want it to be hidden before the view loads.
I’m already working with a resolve to define my variable “showFacebookLogin”

<ion-view view-title="{{'win' | translate}}">
<ion-content class="csfBG">
    <div class="card padding" ng-hide="{{showFBLogin}}">
        <center>
            <p>{{'win_intro' | translate}}</p>
            <button ng-click="loginFB()" class="button  button-positive"><i class="ion-social-facebook"></i> {{'login_fb' | translate}}</button>
        </center>
    </div>
    <div class="card" ng-hide="{{!showFBLogin}}">
        <div class="item item-divider">
            Users Facebook data, after login
        </div>
        <div class="item item-text-wrap">
            {{fbData}}
        </div>
    </div>
</ion-content>

#2

You may want to try ng-cloak


#3

It’s strange, it’s still not working.
I want to hide the card based on the showFBLogin variable.
I still see both card when pressing my tab that renders that view.


#4

Solved it, used ng-hide in the classes!

<ion-view view-title="{{'win' | translate}}">
    <ion-content class="csfBG">
        <div class="card padding ng-hide" ng-show="{{!showFBLogin}}">
            <center>
                <p>{{'win_intro' | translate}}</p>
                <button ng-click="loginFB()" class="button  button-positive"><i class="ion-social-facebook"></i> {{'login_fb' | translate}}</button>
            </center>
        </div>
        <div class="card ng-hide" ng-show="{{showFBLogin}}" >
            <div class="item item-divider">
                Users Facebook data, after login
            </div>
            <div class="item item-text-wrap">
                {{fbData}}
            </div>
        </div>
    </ion-content>
</ion-view>