$state.go，页面上缺少元素，直到刷新答案

【问题标题】：$state.go, missing elements on page until refresh$state.go，页面上缺少元素，直到刷新
【发布时间】：2015-03-24 10:12:44
【问题描述】：

我正在使用 Ionic 和 AngularJS 构建一个应用程序，并使用状态来管理视图。我有一个侧面菜单，可通过导航按钮访问。当切换到我的“主页”页面时，菜单在我刷新之前是不可见的！

在我的侧边菜单中，我使用包裹在 $timeout 中的 $state.go 导航到不同的页面，它运行良好，但是在我的授权登录期间执行此操作时（例如：一旦 auth 移至 app.home）除非我刷新页面，否则该按钮不可见。

这样的问题似乎经常被问到，我已经尝试了我能找到的每一个解决方案；我尝试将 $state.go 包装在 $timeout 中，尝试使用 $state.transitionTo，尝试使用 $state.go(... {reload:true} 将 reload 设置为 true，并尝试使用 transitionTo reload:true inherit:false . 没有什么能解决这个问题。我什至尝试重新设计我的工作流程以从不同的位置处理这个问题，但是无论我做什么菜单按钮都不会显示。

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">

      <ion-nav-buttons side="primary">
        <button class="button button-icon ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>

    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Title!</h1>
    </ion-header-bar>

    <ion-content ng-controller="menuController">

      <ion-list>
        <ion-item nav-clear menu-close ng-click="navHome()">
          Home
        </ion-item>
        ...

$scope.navHome = function () {
    $timeout( function() {
        $state.go('app.home');
    });
};

当从 ng-click 中单击时，上述功能正常，但是在我的 loginController 中并在成功验证后执行的以下功能不起作用（菜单图标在我刷新页面之前不会显示）

    var _login = function() {
        // do server side stuff
        $timeout(function () {
            $state.go('app.home');
        });
    };

** 更新 ** 我有一个解决方法，但我仍然想了解这里发生了什么，因为我认为这不是“正确”的方式。我移动了我的代码，以便加载 app.home，然后 state.go 到 app.login （菜单按钮不可见，这很好），然后在登录时有 state.go 回到 app.home 菜单按钮再次出现。我想这是因为它被转换为离开和返回。

【问题讨论】：

为什么将$state.go() 调用包装在$timeout 中？这通常是不必要的。
@Sly_cardinal 如果我不在菜单调用中这样做，那么导航按钮是不可见的，除非我重新加载页面。在这种情况下，将其包装在 $timeout 中解决了该问题。有更好的解决方案吗？
@VinitChouhan 我最终将我的登录页面包装在一个单独的状态视图中（抽象身份验证和 auth.login 的状态）。我仍然不明白为什么我会遇到我所做的行为，但现在有一个可靠的解决方法。我认为这与 AngularJS 加载状态与视图的方式和时间有关......当我今天晚些时候有时间时，我会在这里发布完整的答案。

标签： angularjs angular-ui-router ionic-framework

【解决方案1】：

<ion-side-menus> 上的属性 enable-menu-with-back-views 需要设置为 true。

只要<ion-nav-back-button></ion-nav-back-button> 不包含在<ion-nav-bar> 中，您就不会看到返回按钮。如果您确实在您的<ion-nav-bar> 中包含<ion-nav-back-button>，您可以通过在您的<ion-view> 上设置hide-back-button="true" 来禁用它。我发现$timeout 是不必要的。

【讨论】：

【解决方案2】：

只为我解决了这个问题：

$ionicHistory.clearCache();
$ionicHistory.clearHistory();
$ionicHistory.nextViewOptions({ disableBack: true, historyRoot: true });

【讨论】：