ionic和AngularJS:如何在导航间保持状态

ionic and AngularJS: How to retain state between navigations?

本文关键字：导航 状态 AngularJS ionic      更新时间：2023-09-26

我正在用ionic和AngularJS开发我的第一个混合移动应用程序，有一件事我想弄清楚:我们如何在导航之间保持状态(如GUI) ?假设我的应用程序有一个带有这些项目链接的侧菜单:

  1. 搜索表单
  2. All (#/all)
  3. Cats (#/cats)
  4. Dogs (#/dogs)
  5. 呃……牛吗?( #/cows)
  6. 联系人(#/contact)

条目2到5以无限加载方式触发请求服务器数据。

现在我们说从Cats，我到Dogs，然后再回到Cats。因为(根据我的理解)，每次路由更改都会创建一个全新的控制器实例(和作用域)，应用程序将从服务器重新加载猫列表。我希望保留Cats状态，并重新显示。

我一直在寻找解决这个问题的方法(我相信这应该是很常见的，只是我没有使用正确的搜索词)。到目前为止，我发现的所有结果都建议监听state change或route change类型的事件，并将对象数组存储到localStorage中。虽然，在某种程度上，这种工作，我觉得它是笨拙的，只是不这样做-例如，HTML必须被编译，这可能是非常缓慢的(注意"无限加载"功能，我前面提到的，它可以增加对象的数量到数百)，并且视口将恢复到应用程序的顶部。

所以我的问题是，你们怎么处理这个问题?是否存在类似于浏览器的后退和前进按钮的导航?

如果我理解正确的话，你需要使用AngularJS服务。要获得更好的解释，请参阅Ionic文档中的这篇文章:

http://learn.ionicframework.com/formulas/sharing-data-between-views/

在"与服务共享数据"一节中，你的问题的答案就在那里。

我遇到了相反的问题，当用户返回到同一页面时，我希望它刷新，但它没有刷新。在过去10个月的某个时候(从这个问题被问到到我写这篇文章之间)，我相信Ionic实现了一个页面缓存，以使他们的iOS滑动返回效果发挥作用。所以你的问题可能已经解决了，但以防万一…

我的问题是通过在模块的.config()节中为每个状态添加"cache: false"来解决的。然而，在一些页面(或者状态，我猜)上，我不希望它们重新加载，但我不能确定当用户返回时页面/状态仍然在缓存中。所以我决定在$rootScope中设置一个标志…或者，更确切地说，在$rootScope中设置一个对象，该对象包含每个控制器的标志变量，并且只检查标志以查看该页面是否已经加载，如果已经加载，则不运行任何控制器代码。因此，对于您描述的设置，您应该有这样的内容:

app.js(或任何定义模块的.js文件):

angular.module('MyApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('Search'  , { cache: true  , url:'/Search'  , templateUrl:'templates/Search.html'  , controller: 'SearchController'  })
    .state('All'     , { cache: true  , url:'/All'     , templateUrl:'templates/All.html'     , controller: 'AllController'     })
    .state('Dogs'    , { cache: true  , url:'/Dogs'    , templateUrl:'templates/Dogs.html'    , controller: 'CatsController'    })
    .state('Cows'    , { cache: true  , url:'/Cows'    , templateUrl:'templates/Cows.html'    , controller: 'DogsController'    })
    .state('Cats'    , { cache: true  , url:'/Cats'    , templateUrl:'templates/Cats.html'    , controller: 'CowsController'    })
    .state('Contact' , { cache: true  , url:'/Contact' , templateUrl:'templates/Contact.html' , controller: 'ContactController' });
  $urlRouterProvider.otherwise('/');
});

对于控制器，你可以这样写:

<标题> controllers.js h1> /html>
相关文章：