ionic $ state.go redirect не загружает ui правильно до щелчка

Question

Я использую ионный с firebase, и я пытаюсь перенаправить при входе на домашнюю страницу. Переадресация $ state.go работает, однако у меня есть скрытая вкладка под названием «Профиль», которую я не показываю до тех пор, пока пользователь не будет аутентифицирован. Эта вкладка остается скрытой в перенаправлении $ state.go и не отображается, пока я снова не перейду на вкладку «Главная». Как вы загружаете загрузку ui при переадресации?

HTML:

вкладки HTML:

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-controller="LoginCtrl"> 

    <!-- Login Tab --> 
    <ion-tab title="Login" icon-off="ion-locked" icon-on="ion-locked" href="#/tab/login"> 
    <ion-nav-view name="tab-login"></ion-nav-view> 
    </ion-tab> 

    <!-- Dashboard Tab --> 
    <ion-tab title="New Post" icon-off="ion-compose" icon-on="ion-compose" href="#/tab/new"> 
    <ion-nav-view name="tab-new"></ion-nav-view> 
    </ion-tab> 

    <!-- Chats Tab --> 
    <ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" href="#/tab/home"> 
    <ion-nav-view name="tab-home"></ion-nav-view> 
    </ion-tab> 
    <!-- Account Tab --> 
    <ion-tab class="{{hiddenProfileTab()}}" title="Profile" icon-off="ion-person" icon-on="ion-person" href="#/tab/profile"> 
    <ion-nav-view name="tab-profile"></ion-nav-view> 

    </ion-tab> 



</ion-tabs> 

Войти Контроллер

.controller('LoginCtrl', ['$scope', '$rootScope', '$state', '$location', function($scope, $rootScope, $state, $location) { 

    $scope.hiddenProfileTab = function(){ 
    // return "ng-hide"; 
    if ($rootScope.currentUser){ 
    return "ng-show"; 
    } else { 
    return "ng-hide"; 
    } 
} 

//DO SOME THINGS 
     // $location.path('tab.home') 
     // $state.go('tab.home') 
     // $state.go('tab.home'), {}, { reload: true } 
     $state.go('tab.home',{},{location:'replace'}); 
    }; 





}]) 

Чтобы подтвердить эту проблему, на вкладке Профиль остается скрытым от $ состоянии. перейдите на страницу «домой», пока нажимается вкладка «Домашняя страница».

Любые идеи по загрузке пользовательского интерфейса при перенаправлении?

Answer 1

Использовать ng-show вместо атрибута класса с интерполяцией {{}}.

<ion-tab ng-show="currentUser" title="Profile" icon-off="ion-person" icon-on="ion-person" href="#/tab/profile"> 
     <ion-nav-view name="tab-profile"></ion-nav-view> 
    </ion-tab> 

Answer 2

Решено, установив кеш: false, чтобы контроллер снова загрузился.

.state('tab.home', { 
    cache: false, 
     url: '/home', 
     views: { 
     'tab-home': { 
      templateUrl: 'templates/tab-home.html', 
      controller: 'HomeCtrl' 
     } 
     } 
    }) 

Answer 3

Не уверен, если это непосредственно связано с этой конкретной проблемы, но когда я столкнулся с аналогичной проблемой с элементами не отображаются до тех пор, пока пользователь не начал взаимодействовать с пользовательским интерфейсом, я обнаружил, что проблема была из-за наличия нескольких элементов с тем же значением атрибута id.

В моем случае это было связано с иконкой анимации загрузчика, которую я использовал на нескольких представлениях. У меня всегда был установлен идентификатор загрузчика на одно и то же («load-progress»). Когда я показывал и скрывал свой загрузчик, я испытывал странное поведение, пока не убедился, что вы назвали каждый загрузчик уникальным.

В конечном счете, я думаю, что моя проблема заключалась в том, что я не рассматривал углов как одностраничное приложение, а кодировал, как если бы это был полный сайт с уникальными страницами и представлениями. Легко просто сосредоточиться на взгляде под рукой и забыть, что он фактически сидит в большом наборе вложенных представлений и фрагментов html.

Редактировать: Также я должен был упомянуть, что другая распространенная проблема, когда контент не отображается (особенно динамически загружаемый контент), часто относится к изменению размера окна/div. В частности, если вы начинаете с скрытым DIV, который вы затем заселить с данными с помощью вызова API, часто необходимо заключить его с вызовом:

$ ionicScrollDelegate.resize()

, чтобы заставить размер из div, подлежащего пересчету. Без этого ваши данные могут быть загружены, но все еще не видны, потому что родительский div все еще висит с высотой 0px.

Edit снова !:

Кроме того, при работе с нг-повтором и аналогичными динамическими угловой привязкой данными, чтобы заставить логику нг повторно синхронизировать HTML с данными, вы можете использовать:

$ объем ,$ Применяются();