angularjs - 在 Angular 页面之间保留值的最简单方法？

Question

我在x页。我单击页面 x 上的一个操作，该操作使用新文本更新(使用 ajax)3 个 div 元素。

然后我导航到页面y(带有 Angular 请求)，然后返回页面x - 我用ajax更改的值现在消失了(它们是默认值) )。

我的值不在表单内，而是在 div 元素内。

在 Angular 切换页面之间保留值的最简单方法是什么，以防其中一些值发生更改(例如使用ajax)？

Answer 1

最简单？在 $rootScope 上设置值。

$rootScope.name = name;

现在只需将 $rootScope 注入(inject)任何需要名称的 Controller 中即可。

angular.module('myModule').controller('CtrlA', function($rootScope) { 
  $rootScope.name = "something";
});

angular.module('myModule').controller('CtrlB', function($rootScope) { 
  console.log($rootScope.name);
});

如果您开始向 rootScope 添加大量值，您最好使用 service .

类似于名称这样的简单服务的等效服务是:

angular.module('myModule').service('Name', function Name() {
  var name;

  var service = {       
   getName: function() { return name; },
   setName: function(n) { name = n; }
  };
  return service;
});

然后你可以在不同的 Controller 中注入(inject)这个服务。

angular.module('myModule').controller('CtrlC', function(Name) { 
  Name.setName('hello world!');
});

angular.module('myModule').controller('CtrlD', function(Name) { 
  $scope.name = Name.getName();
  console.log($scope.name);
});