Javascript ionic和AngularJS：如何在导航之间保持状态？

我正在用ionic和AngularJS开发我的第一个混合移动应用程序，有一件事我想弄清楚：我们如何在导航之间保持状态（如GUI）？假设我的应用程序有一个附带菜单，其中包含以下项目链接：

搜索表

全部（

#/All

）

猫（

#/Cats

）

狗（

#/Dogs

）

呃。。。奶牛？（

#/cows

）

联系人（

#/Contact

）

从2到5的项以不合适的加载方式触发请求服务器数据

现在让我们从猫开始，我先去狗，然后再回到猫。因为（据我所知），每次路由更改都会创建一个全新的控制器实例（和范围），所以应用程序将从服务器重新加载CAT列表。我希望保持猫的状态，并重新显示

我一直在寻找解决方案（我认为这应该足够普遍，只是我没有使用正确的搜索词）。到目前为止，我发现的所有结果都建议监听

状态更改

或

路由更改

类型的事件，并将对象数组存储到

本地存储

。虽然，从某种程度上说，这项工作很笨拙，但我觉得这不是一种方法——例如，必须编译HTML，这可能非常慢（请注意我前面提到的“有限加载”功能，它可以将对象数量增加到数百个），视口将恢复到应用程序的顶部

---

所以我的问题是，你们是怎么做到的？是否有类似于浏览器后退和前进按钮的导航功能？

如果我正确理解您的需求，您需要使用AngularJS服务。有关详细说明，请参阅爱奥尼亚文档中的这篇文章：

---

在“与服务共享数据”一节中，您的问题的答案就在这里。

我遇到了相反的问题，如果用户返回到同一页面，我希望它刷新，但事实并非如此。在过去10个月的某个时候（从提出这个问题到我写这篇文章的时候），我相信爱奥尼亚实现了一个页面缓存，让他们的iOS幻灯等东西回到原来的效果。所以你的问题可能已经解决了，但以防万一

通过在模块的.config（）部分的每个状态的选项中添加“cache:false”，解决了我的问题。但是，在某些页面（或状态，我猜）上，我不希望它们重新加载，但我无法确定当用户返回时页面/状态是否仍在缓存中。所以我决定在$rootScope中设置一个标志。。。或者，更确切地说，在$rootScope中设置一个对象，该对象包含每个控制器的标志变量，只需检查标志以查看该页面是否已加载，如果已加载，则不运行任何控制器代码。因此，对于您描述的设置，您将有如下内容：

app.js（或定义模块的任何.js文件）： 然后对于控制器，您可以执行以下操作：

controllers.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('/');
});

.controller('SearchController', function($scope, $rootScope, $state) {
    // If $rootScope.flags does not already exist, create it as an empty object
    $rootScope.flags = $rootScope.flags || {};

    if($rootScope.flags.SearchPageHasBeenOpenedAlready) {
      console.log("Search page was already opened, not doing anything.");
      return;
    } else {
      // Assuming this is the first controller, I guess you could initialize the flags here...
      // We will initialize them all to false and not set them to true until the code for
      // each controller has run through successfully
      $rootScope.flags.SearchPageHasBeenOpenedAlready  = false;
      $rootScope.flags.AllPageHasBeenOpenedAlready     = false;
      $rootScope.flags.CatsPageHasBeenOpenedAlready    = false;
      $rootScope.flags.DogsPageHasBeenOpenedAlready    = false;
      $rootScope.flags.CowsPageHasBeenOpenedAlready    = false;
      $rootScope.flags.ContactPageHasBeenOpenedAlready = false;
    }

    /* Whatever you normally do in SearchController goes here */

    $rootScope.flags.SearchPageHasBeenOpenedAlready = true;
  }
)

.controller('AllController', function($scope, $rootScope, $state) {
    // If $rootScope.flags does not already exist, create it as an empty object
    $rootScope.flags = $rootScope.flags || {};

    if($rootScope.flags.AllPageHasBeenOpenedAlready) {
      console.log("All page was already opened, not doing anything.");
      return;
    }

    /* Whatever you normally do in AllController goes here */

    $rootScope.flags.AllPageHasBeenOpenedAlready = true;
  }
)

/* 
And so forth until the last one...
*/

.controller('ContactController', function($scope, $rootScope, $state) {
    // If $rootScope.flags does not already exist, create it as an empty object
    $rootScope.flags = $rootScope.flags || {};

    if($rootScope.flags.ContactPageHasBeenOpenedAlready) {
      console.log("Contact page was already opened, not doing anything.");
      return;
    }

    /* Whatever you normally do in ContactController goes here */

    $rootScope.flags.ContactPageHasBeenOpenedAlready = true;
  }
);