离子视图未缓存,控制器重新加载

时间:2017-10-13 07:57:15

标签: javascript android angularjs cordova ionic-framework

我有一个带有一些视图的离子应用程序,当我启动应用程序时,我将转到我的主视图,当视图的控制器初始化时,我将加载一些数据。

问题是,当我从该视图导航时,使用选项卡,该控制器有时被破坏,因此当我向后导航时,数据将不得不再次加载。

我已经使用' $ ionicView.loaded' ' $ ionicView.unloaded' 进行了一些测试在卸载视图时非常随机。

这是我的州配置

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

  .state('login', {
    name: "login",
    url: "/login",
    templateUrl: "templates/login.html",
    controller: 'loginCtrl'
  })

  // This is a sidemenu
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html'
  })

  .state('app.hms', {
    url: '/hms',
    views: {
      'menuContent': {
        templateUrl: 'templates/hms-app.html',
        controller: 'HmsCtrl'
      }
    }
  })

  .state('app.hms-item', {
    url: '/hms/:hmsId',
    views: {
      'menuContent': {
        templateUrl: 'templates/hms-item.html',
        controller: 'HmsItemCtrl'
      }
    },
    params: {
      item: null
    }
  })

  .state('app.history', {
    url: '/history',
    views: {
      'menuContent': {
        templateUrl: 'templates/history-list.html',
        controller: 'HistoryCtrl'
      }
    }
  })
  .state('app.history-item', {
    url: '/history/:itemId',
    views: {
      'menuContent': {
        templateUrl: 'templates/history-item.html',
        controller: 'HistoryItemCtrl'
      }
    },
    params: {
      itemId: null
    }
  })

  .state('app.event-new', {
    url: '/event/new',
    views: {
      'menuContent': {
        templateUrl: 'templates/event-new.html',
        controller: 'EventCtrl as ctrl'
      }
    }
  })

  .state('app.risk-new', {
    url: '/risk/new',
    views: {
      'menuContent': {
        templateUrl: 'templates/risk-new.html',
        controller: 'RiskCtrl as ctrl'
      }
    }
  });


// if none of the above states are matched, use this as the fallback
// this is also the first page, 'front page'
$urlRouterProvider.otherwise('login');

});

我的标签在我需要的每个.html模板中定义(例如,不是登录页面),它们是在关闭离子内容后定义的:

  <div class="tabs tabs-icon-top">
<a class="tab-item" href="#/app/hms">
  <i class="icon ion-home"></i>
  Home
</a>
<a class="tab-item" href="#/app/event/new">
  <i class="icon ion-document-text"></i>
  Hendelse
</a>
<a class="tab-item" href="#/app/risk/new">
  <i class="icon ion-document-text"></i>
  Risikorapport
</a>
<a class="tab-item" href="#/app/history">
  <i class="icon ion-ios-list"></i>
  Historikk
</a>

当我从中导航时,什么可能导致视图的控制器被破坏?

1 个答案:

答案 0 :(得分:1)

事实证明,Ionic删除了&#34; forward&#34;的视图的缓存,因此当从前视图导航回来时,$ scope将被销毁。

这在缓存here

下进行了解释
  

默认情况下,在历史记录中导航回来时,会从缓存中删除“转发”视图。如果再次向前导航到同一视图,它将创建一个新的DOM元素和控制器实例。基本上,每次都会重置任何前向视图。这可以使用$ ionicConfigProvider:

进行配置

因此,配置$ionicConfigProvider$ionicConfigProvider.views.forwardCache(true);修复了我的问题

我也看到了我可以用另一种方式解决我的问题,那就是不用我的观点&#34;转发&#34;,当使用href导航到新视图时,我们可以指定应该是什么类型的视图通过nav-direction="swap",可用的路线为forward, back, enter, exit, and swap

选项卡示例,方向

<a class="tab-item" nav-direction="swap" nav-transition="android" href="#/app/home">
  <i class="icon ion-home"></i>
  Home
</a>