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

Posted 2023-05-06

【中文标题】离子视图未缓存，控制器重新加载

【英文标题】：ionic view is not cached, controller reloads

【发布时间】：2018-03-25 07:27:26

【问题描述】：

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

问题是，当我使用选项卡从该视图导航时，该控制器有时会被破坏，因此当我返回导航时，必须再次加载数据。

我已经对 '$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 模板中定义的（例如，不是登录页面），它们是在 ion-content 关闭后定义的：

  <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】：

事实证明，Ionic 移除了“前向”视图的缓存，因此当从前向视图返回时，$scope 将被销毁。

这在缓存here下有解释

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

所以，用$ionicConfigProvider.views.forwardCache(true); 配置$ionicConfigProvider 解决了我的问题

我还看到我可以通过另一种方式解决我的问题，那就是不要让我的视图“向前”，当使用 href 导航到新视图时，我们可以通过 @987654324 指定应该是哪种视图@，可用方向为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>