angularjs - 路由时如何保留当前视图数据

Posted 2023-02-26

【中文标题】angularjs - 路由时如何保留当前视图数据

【英文标题】：angularjs - how to keep current view data when routing

【发布时间】：2015-01-17 07:39:26

【问题描述】：

我对 angularjs 有疑问。 2 有 2 个视图：

视图 1 具有这些控件 名为 txtBox1 的文本框，默认值为空 一个名为“更改”的按钮，用于将 txtBox1 中的文本更改为“已更改！” 查看 2 名为 txtBox2 的文本框

首先我导航到 View1，点击按钮，txtBox1 的内容变为“Changed !”。然后我导航到 View2，然后我回到 View1。

那么我怎样才能保留我从 View1 输入到 txtBox1 的数据呢？ 我用过 DurandalJs，他们有视图缓存选项，可以在导航时保持当前数据在视图中，但我不知道如何使用 angularjs？

【问题讨论】：

一些简化的代码可能会有所帮助，但基本思想是您应该创建一个供两个控制器使用的数据服务，并将值存储在视图 1 上。这也将允许 view2 在需要时访问它.如果不需要，view2 不需要引用服务，因为它将由应用实例化并保持实例化，直到应用关闭。

你能贴出你的代码吗？

【参考方案1】：

@jimmy ng：您是否希望即使在刷新后也能存储您的数据？这很重要。

如果您只希望这些值用于当前应用程序运行并假设每个主视图都有 1 个 ctrl，那么您可以通过帮助服务类（数据管理器服务）存储表单数据：

myapp.service('viewDataManager', [function () 
  var data = ;
  // TODO: optionally via html5 getter/setter way
  return 
    get: function (key)  return data[key]; ,
    set: function (key, newData)  data[key] = newData; 
  ;
]);

然后，在 view1Controller 的销毁中，您只需设置表单数据：

 $scope.$on('$destroy', function () 
   view1DataManager.set('view1FormData', $scope.myModel.formStates);
 );

同样，在 init/constructor 上，重新加载这些状态：

 $scope.init = function () 
   $scope.myModel.formStates = view1DataManager.get('view1FormData');
 ;

这是为了保留应用程序当前运行的数据。对于未来的实例，只需更新数据管理器以将其设置为 localStorage 或 websql 甚至 cookie（虽然不太推荐）。

注意：您也可以将几乎所有内容都存储在 $rootScope 中，但这只是您从任何角度看待它（架构、性能等）的核心。所以绝对是“不要去那里”的事情。

更新： @jimmyng：基本上不可能将这些状态存储在对象（又名 ctrl）中，因为对象（当然）正在被丢弃并按需再次实例化。

假设您所有的 UI 易失性数据都存储在“formStates”中，上面的代码将处理您需要的内容。您正在使用 AngularJS，因此小部件将绑定到 ng-model。你也可以把选择的选项放在那里等等。

// E.g.:
dropdownlist ---> ng-model -> formStates.selectedXXX
dropdownlist ---> ng-options-> formStates.xxxOptions
textbox ---> ng-model -> formStates.name
etc

【讨论】：

好吧，实际上我不想将表单数据存储在变量中。我想让我当前的控制状态在我导航到其他视图时不会改变。您可以想象在 View 1 上您已经完成了这些操作：选择一个下拉列表，输入一个文本框。然后导航到视图 2 以检查一些变量，然后返回视图 1 继续当前的工作。但是一切都没有了，View 1 被刷新了。