The contents of Ionic views are not stored in a cache, so the controller must

In my ionic application, I have several views. When I launch the app, it takes me to the main view where data is loaded upon initialization of the controller.

The issue arises when I navigate away from this view using tabs; sometimes the controller gets destroyed. As a result, when I return to the view, the data has to be reloaded.

I've experimented with '$ionicView.loaded' and '$ionicView.unloaded', but it seems that the unloading of the view is somewhat random.

This is how my state configuration looks:

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

$stateProvider

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

  // Sidemenu here
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html'
  })

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

  ... // Other states defined similarly

// Fallback route
$urlRouterProvider.otherwise('login');

});

My tabs are specified in each respective HTML template after closing ion-content:


  <div class="tabs tabs-icon-top">
<a class="tab-item" href="#/app/hms">
  <i class="icon ion-home"></i>
  Home
</a>
... // Additional tab definitions
</div>

Any insights on what could potentially lead to the destruction of the view's controller during navigation?

Answer №1

It turns out that Ionic eliminates caching for views that are considered "forward", so when returning from a forward view, the $scope gets destroyed.

This information can be found under caching here

By default, when going back in the history, the “forward” views are cleared from the cache. If you navigate forward to the same view again, a new DOM element and controller instance will be created. In essence, any forward views are reset each time. This behavior can be adjusted using the $ionicConfigProvider:

So, by setting up the $ionicConfigProvider with

$ionicConfigProvider.views.forwardCache(true);
, I was able to resolve my problem.

I also discovered an alternative solution to fix the issue by avoiding making my views "forward". When navigating to a new view using href, we can specify the type of view it should be by using nav-direction="swap". The available directions include

forward, back, enter, exit, and swap
.

Here's an example of a tab with a specified direction:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to transform a local array into remote JSON data?

I am attempting to retrieve an array from a remote server that is connected to a dynamic database. From what I have gathered on Ionic forums, it seems that I need to utilize the $http function from AngularJS. However, since I am new to AngularJS, the curr ...

HTTP 400 Error: Bad Request Callback

I'm attempting to send data using REST API through jQuery AJAX. Here's the code I am using: $.ajax({ url: 'myurl', type: 'POST', contentType: 'application/json; charset=utf-8', data: JSON.stringify(j ...

During the initial render in next-auth, the useSuspenseQuery function is triggered to fetch data without a defined token, resulting in an

Recently, I've started implementing the new useSuspenseQuery feature from react-query and I couldn't help but notice that the enabled property is missing on this hook. This has caused an issue with my useGetApiToken function, as it initially retu ...

When should you utilize child or nested states in AngularJS UI-Router?

I'm currently working on a large AngularJS application that follows the design of having one .html file per state. Each view is represented by a single HTML file, and I am avoiding including multiple HTML files per page. $stateProvider.state('fi ...

Keep sending HTTP requests until the header contains an attachment

Welcome to our web application where you can generate and download a .zip file simply by visiting the URL. I am looking to develop a Node.js application using the requestjs library that will continuously send requests until it detects an attachment header ...

I'm facing an issue with binding keyboard events in Vue - any suggestions on how to resolve

Hello everyone! I'm a newcomer to the world of Vue. Recently, I encountered an issue with keyboard-event binding that has left me puzzled. Let me share the relevant code snippet below: ...other code... <template v-for="(ite ...

Discover and capture zip codes using javascript

Looking to extract zip codes from strings like "HONOLULU HI 96814-2317 USA" and "HONOLULU HI 96814 USA" using JavaScript. Any suggestions on how to achieve this? ...

Is there a method for the parent to detect changes in its output when passing around complex objects to its child?

I am facing a challenge with a complex object that is being passed down from a parent component to its child components. The child components further break down this object and pass parts of it to their own children, creating layers of complexity. At times ...

Disabling scrolling on body while scrolling a superimposed element

I am working on creating a dynamic image gallery for browsers that support Javascript. The gallery consists of thumbnails that lead to full-size photos displayed in a table layout, complete with navigation links and captions. This table is centered using f ...

What is the best way to dynamically reference an HTML file based on the value of a JSON data description, using the description as the filename

Here I have created a sample file which is currently working fine. However, my requirement is to call the HTML elements from a separate file and only reference the external file name in the Description field. Is it possible to achieve this by specifying th ...

Ways to observe redux action flow within a component

I am currently developing a React application structured with the following elements: redux typesafe-actions redux-observable My query is: How can I trigger a UI action when a specific redux action occurs? For instance, if we have these asynchronous ac ...

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

Understanding the use of promises in Angular for handling async operations is crucial, but I'm struggling to implement it effectively in this scenario. function fetchLineGraphData(promises){ var dataPoints = []; for (var i = 0; i < promise ...

Tips on sorting items in React

Hey there, I'm a beginner at react and currently working on my first ecommerce website. My main concern is about filtering products by size. I'm struggling with the logic behind it. Any help or guidance would be greatly appreciated. I also attem ...

What is the best method for passing page props in Next.JS?

One example is using the React Context API to pass props from the _app file to pages. Another scenario involves refactoring a ReactJS routing, where state is passed from app.js to pages through the route definition as shown below: <Route><Compon ...

Converting an ISO date to a standard JS date: The straightforward approach

Can anyone help me with converting an ISO date to a Standard JS Date format? The specific format I need is: Mon `Jul 20 2020 14:29:52 GMT-0500 (Central Daylight Time)` I would appreciate any guidance on the best approach for achieving this. Thank you in a ...

Is it possible for consecutive json and jsonp requests to fail on Crossrider?

I am currently utilizing crossrider to develop a plugin that works across various browsers. Within my implementation, I have two consecutive AJAX requests (one JSON and one JSONP): The first request involves a JSON call for "login" which sets a brows ...

Does Vuex dispatch from within a component include a particular type of behavior known as a "promise"?

Currently, I am diving into vuex and facing an issue. During the created() lifecycle hook, my goal is to fetch data from an API. Once this action is complete, I need to call a getter from the component and assign the retrieved cards to the component's ...

Angular 7+: Trouble with displaying images from assets directory

Details regarding my Angular version: Angular CLI: 7.3.9 Node: 10.15.3 OS: win32 x64 Angular: 7.2.15 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... rout ...

ngOptions not updating the selected item in the select dropdown

My Angular code is not reflecting the selected option in the select input. Even though I have specified Hospital One to be selected, it's not happening. Can anyone figure out what might be causing this issue? I've also shared the same code snipp ...

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...