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

Question

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

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

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

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

Answer 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