離子動態選項卡，UI路由器導航未加載正確的視圖

Question

基於Codepen上的Ionic示例，我構建了一個具有主頁，登錄頁面和聯系人頁面的簡單應用程序。 我的申請在這里 。 登錄控制器在我們登錄時設置$rootScope.user變量：

.controller('LoginCtrl', function($scope, $rootScope, $state) {
  $scope.login = function(){
    $rootScope.user = {name:"lyman"};
    $state.go("tabs.contact");
  };
})

登錄后，我們正確地重定向到“聯系人”屏幕，“聯系人”選項卡顯示並突出顯示。 現在單擊“主頁”選項卡。 預期的行為：我應該看到主頁上已經登錄了。得到的結果：標題更改為“主頁”，“主頁”選項卡突出顯示，但視圖更改為template / login.html模板！ 您仍然可以導航到“聯系人”，從那里注銷，然后導航完全停止工作。 我想念什么？

另一個奇怪的是，當嘗試隱藏和顯示選項卡時， ng-show和ng-hide指令被完全忽略，只有ng-if起作用。 我在想問題可能是因為我正在使用ng-if從標記中插入和刪除標簽，而ion-nav-view位於ion-tab標簽中？ 解決方法是什么？

Answer 1

因此，是的，使用ng-if隱藏/顯示標簽會破壞導航。 解決方案是使用選項卡的hidden屬性，如我原始示例的此fork所示 ：

<ion-tab title="Log In" icon="ion-ios-person" ui-sref="tabs.login" hidden="{{ loggedIn() }}">
        <ion-nav-view name="login-tab"></ion-nav-view>
      </ion-tab>

控制器：

.controller('TabsCtrl', function($scope, $rootScope) {
    $scope.loggedIn = function() {
      if ($rootScope.user) {
        return true;
      }
      return false;
    };
  })