Question

我根据Ionic example on Codepen构建了一个简单的应用程序，其中包含主页，登录页面和联系人页面。我的申请是here。登录时，登录控制器会设置$rootScope.user变量：

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

登录后，我们会正确地重定向到“联系人”屏幕，显示并突出显示“联系人”选项卡。现在单击“主页”选项卡。预期的行为：我应该看到主页上写着我已登录。我得到的内容：标题更改为主页，主页选项卡突出显示，但视图更改为templates / login.html模板！您仍然可以导航到“联系人”，从那里注销，然后导航停止工作。我错过了什么？

另一个奇怪的是，在尝试隐藏和显示标签时，ng-show和ng-hide指令被完全忽略，只有ng-if有效。我想这个问题可能是因为我使用ng-if来插入和删除标记中的标签，并ion-nav-view位于ion-tab标签内？什么是解决方法？

Answer 1

所以，是的，使用ng-if隐藏/显示标签会搞砸导航。解决方案是使用标签hidden属性，如fork of my original example所示：

<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;
    };
  })

离子动态标签，ui-router导航无法加载正确的视图

1 个答案: