如何访问不同页面控制器中的更新值？答案

【问题标题】：How to access updated value in different page controllers?如何访问不同页面控制器中的更新值？
【发布时间】：2015-09-15 17:29:43
【问题描述】：

我在不同页面控制器之间获取更新值时遇到问题，情况如下。

page1.html

<body ng-app="app">
<div  ng-controller="ctrl1">{{ version }}</div>
</body>

page2.html

<body ng-app="app">
<div  ng-controller="ctrl2">{{ version }}</div>
</body>

app.js

 var app = angular.module("app", []);

 app.run(function($rootScope) {
   $rootScope.Data = [];
   $rootScope.Data.Version = '1.0.0.1';
 });

  app.controller('ctrl1', function($scope, $rootScope){
   $scope.version = $rootScope.Data.Version;
   $rootScope.Data.Version = '1.0.0.2';
  });

 app.controller('ctrl2', function($scope, $rootScope){      
   $scope.version = $rootScope.Data.Version;
 });

结果

version: 1.0.0.1 // page1.html 
version: 1.0.0.1 // page2.html

预期结果

version: 1.0.0.1 // page1.html 
version: 1.0.0.2 // page2.html

这种情况如何实现？

我尝试将本教程中的 $broadcast 用于单独的页面控制器：fiddle

【问题讨论】：

您的 jsfiddle 似乎与您提供的相关代码不匹配。我的意思是你的小提琴中的rootScope 在哪里？
我用 Google 搜索并获得了使用广播的 jsfiddle 教程。对于单页多个控制器正在工作。但我需要多个页面控制器。
您如何呈现单独的页面（视图）？ ng-route 还是 ui-router ？
我没有使用任何东西。基本上，我在页面之间重定向。
page1.html 和 page2.html 是否表明您实际上在使用两个单独的 htmls 文件？如果是这样，那么您尝试做的事情是不可能的（除非您将使用一些外部存储/传输机制 [url，localStorage，cookie，...]）。

标签： javascript angularjs angular-broadcast angularjs-rootscope

【解决方案1】：

你知道我在使用 Angular 2 年后发现了什么，使用像 $scope.version 这样的直接变量对 Angular 来说并不是最好的，因为它们会添加不同的手表，而在你的情况下，你正在重写“版本”的实例。

不管怎样，试着把所有在不同控制器、服务、指令等之间同步的东西都写成这样。

    var state = {
        version: $rootScope.Data.Version,
        anyOtherVariable: value
    };
    $scope.state = state;

【讨论】：

【解决方案2】：

您不能只是重新加载页面而不丢失所有数据，您知道吗？你的$rootScope 死了，一切都死了...... :) 你的例子是完全错误的。 使用不强制重新加载浏览器的 SPA 路由，或使用某种类型的本地存储来保证数据安全。

我还注意到您正在绑定到原语$scope.version = $rootScope.Data.Version; - 不要那样做，使用$scope.data = $rootScope.Data;，然后使用{{data.Version}}。无论如何，您根本不应该使用 $rootScope。

【讨论】：

@smaji，非常感谢。我知道如果页面重新加载数据我会丢失但我的情况，我必须在页面之间重定向。我尝试了它正在工作的cookie，但是如果我将cookie变量存储在page1.html中（例如：cookie_name =“value1”），我可以在page2.html中访问，如果我想将另一个值设置为相同的cookie变量（例如：cookie_name = "value2"），从 page1.html 存储后，我无法访问最新更新的变量。
我想，我必须使用ngStorage 进行本地存储。
@Silambu 是的，在我的项目中，我使用了 gsklee/ngStorage 和 auth0/angular-storage。对于初学者，我建议使用 ngStorage。 :)

【解决方案3】：

在控制器使用广播和 on 方法之间传递值。请参考链接http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-$emit,-$broadcast-and-$on-in-AngularJS.html

【讨论】：

但是我有不同的控制器页面
在第一个控制器的工厂方法中创建变量然后调用广播。