在不同路由的控制器之间共享变量 - AngularJS答案

【问题标题】：Share Variable between controllers of different routes - AngularJS在不同路由的控制器之间共享变量 - AngularJS
【发布时间】：2026-01-16 08:10:01
【问题描述】：

我是 Angularjs 的新手，我正在尝试构建我的第一个应用程序。假设我必须加载两个不同视图的路由：

127.0.0.1:8080/站点
127.0.0.1:8080/site_details

也许有两条不同的路线不是正确的程序，而是另一个问题。

我有两个控制器： 控制器 1：

app.controller('controller_1', function($scope, $http, user) {
          user.set('Test Example')
});

和控制器 2

app.controller('controller_2', function($scope, $http, user) {
        var xxx = user.get()
});

我想做的是在这两个控制器之间共享数据。为此，我以这种方式做了一项服务：

app.factory('user', function($rootScope) {
 var savedData = {}

 function set(data) {
   savedData = data;
 }
 function get() {
  return savedData;
 }

 return {
  set: set,
  get: get
 }

});

环顾四周，这样构建的服务似乎可以解决问题。但是，我使用控制器 2 中的函数 get() 获得的总是一个空返回。通过设置断点，我可以看到 set() 和 get() 函数都进入了服务中各自的函数。

这是在属于不同路由的控制器之间共享数据的正确程序吗？

EDIT1 这两个视图以相同的方式构建，并在 ng-view 中加载

<html ng-app="app" ng-controller='controller_1'>
        CONTROLLER 1
</html>

【问题讨论】：

您是否在做任何可能导致服务重新加载的事情？ IE。刷新页面。可以肯定的是，最好的方法是添加一个从 controller_1 到 controller_2 的视图链接
其实这两个视图都很基础。请参考编辑问题。它们被加载到 ng-view 中。因此，我将检查服务是否以某种方式重新加载。

标签： angularjs angularjs-controller angular-factory angularjs-view

【解决方案1】：

首先，在服务之间共享数据是一种正确的方法。

在您的情况下，您需要确保获取数据的顺序在设置数据之后。使用 $timeout 不是一个好方法，我认为应该有另一种方法，这取决于您的详细代码。

如果您的数据是在某个事件之后设置的，您只需要注意“设置数据后获取”之类的顺序即可

如果必须在controller_1的初始化中设置数据，而controller_2是controller_1的兄弟，那么可以在进入controller_1和controller_2之前把用户数据的初始化逻辑放在里面。

【讨论】：

【解决方案2】：

我想你已经给工厂引用了 html where first 和你给的第二个控制器。在这种情况下，您必须将工厂裁判提供给您还加载子页面的主单页（您保留 ng-view 的位置）

【讨论】：

【解决方案3】：

出现问题的原因是，在创建 controller_2 之前未创建 controller_1。您可以修改controller_2 以使用$timeout 引入一些延迟：

app.controller('controller_2', function($scope, $timeout, $http, user) {
    // The time out is added to check your code working,
    // You can replace the code or can use, its up to your requirement
    $timeout(function(){    
        var xxx = user.get();
        console.log(xxx);
    }, 500);
});

使用 $timeout 将留出一些时间来创建 controller_1。

同时实例化controller_2:

<html ng-app="app">
  <body> 
     ........ 
    <div ng-controller='controller_1'>
       <div ng-controller='controller_2'>
       </div> 
    </div>
  </body> 
</html>

【讨论】：

【解决方案4】：

你可以像下面这样使用 rootscope。

app.controller('controller_1', function($scope, $http, $rootScope) {
      $rootScope.UserInfo ="Test Example";
});

 app.controller('controller_2', function($scope, $http, $rootScope) {
    var xxx = $rootScope.UserInfo;
    console.log(xxx)
});

【讨论】：