Javascript ionic视图未缓存,控制器重新加载
我有一个带有一些视图的ionic应用程序,当我启动应用程序时,我将转到我的主视图,当视图的控制器初始化时,我将加载一些数据 问题是,当我使用选项卡从该视图导航时,该控制器有时会被破坏,因此当我向后导航时,必须再次加载数据 我已经用“$ionicView.loaded”和“$ionicView.unloaded”做了一些测试,当视图被卸载时,它似乎是非常随机的 这是我的状态配置Javascript ionic视图未缓存,控制器重新加载,javascript,android,angularjs,cordova,ionic-framework,Javascript,Android,Angularjs,Cordova,Ionic Framework,我有一个带有一些视图的ionic应用程序,当我启动应用程序时,我将转到我的主视图,当视图的控制器初始化时,我将加载一些数据 问题是,当我使用选项卡从该视图导航时,该控制器有时会被破坏,因此当我向后导航时,必须再次加载数据 我已经用“$ionicView.loaded”和“$ionicView.unloaded”做了一些测试,当视图被卸载时,它似乎是非常随机的 这是我的状态配置 .config(function($stateProvider, $urlRouterProvider) { $sta
.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内容关闭后定义的:
<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>
当我从视图中导航时,什么会导致视图的控制器被破坏 事实证明,Ionic删除了对“正向”视图的缓存,因此当从正向视图返回时,$scope将被销毁 这在缓存下进行了解释 默认情况下,在历史记录中导航时,“前进”视图将从缓存中删除。如果再次向前导航到同一视图,它将创建一个新的DOM元素和控制器实例。基本上,每次都会重置任何正向视图。这可以使用$ionicConfigProvider进行配置: 因此,使用
$ionicConfigProvider.views.forwardCache配置$ionicConfigProvider
代码>修复了我的问题
我还发现我可以用另一种方式解决我的问题,那就是不使我的视图“向前”,当使用href导航到新视图时,我们可以通过执行nav direction=“swap”
,指定应该是哪种视图,可用的方向是向前、向后、进入、退出和交换
带方向的选项卡示例
<a class="tab-item" nav-direction="swap" nav-transition="android" href="#/app/home">
<i class="icon ion-home"></i>
Home
</a>