ionic $state.go 重定向在单击之前无法正确加载 ui

Question

我正在使用 ionic 和 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'});
    };





 }])

为了重申这个问题，配置文件选项卡在 $state.go 重定向到“主页”页面上保持隐藏，直到单击“主页”页面选项卡。

任何想法如何在重定向上加载 UI？

Answer 1

不确定它是否直接归因于这个特定问题，但是当我遇到类似的问题时，元素在用户开始与 UI 交互之前不显示，我发现问题是由于多个元素具有相同的“ id”属性值。

在我的例子中，它与我在多个视图中使用的加载器动画图标有关。我总是将加载程序 ID 设置为相同的内容（“加载进度”）。在显示和隐藏我的加载器时，我遇到了奇怪的行为，直到我确保为每个加载器命名。

最终，我认为我的问题是由于没有将 Angular 视为单页应用程序，而是将其编码为具有独特页面和视图的完整站点。很容易只专注于手头的视图，而忘记它实际上位于大量嵌套视图和 html sn-ps 中。

编辑：另外，我应该提到，另一个不出现内容（尤其是动态加载的内容）的常见问题通常与窗口/div 调整大小有关。特别是，如果您从一个隐藏的 div 开始，然后通过 api 调用填充数据，您通常需要调用以下命令来结束它：

$ionicScrollDelegate.resize()

强制重新计算 div 的大小。没有这个，你的数据可以被加载但仍然不可见，因为父 div 仍然以 0px 的高度悬空。

再次编辑！：

此外，在使用 ng-repeat 和类似的动态角度数据绑定时，强制 ng 逻辑将 html 与您可以使用的数据重新同步：

$scope.$apply();

Answer 2

通过设置 cache:false 来解决这个问题，以便控制器被强制再次加载。

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

Answer 3

使用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>