AngularJS跨控制器Scope变量值变更未同步问题求助

这问题我太熟了！AngularJS里不同控制器的$scope是相互独立的，你现在在NumTwoController里改的$scope.variable1和NumOneController里的根本不是同一个变量，所以另一个控制器自然拿不到更新后的值——加$scope.$apply()当然没用，因为根本不是消化循环的问题！

下面给你几种靠谱的解决方案，按推荐程度排序：

AngularJS的服务是单例的，天生适合用来在不同控制器间共享数据，这也是官方最推荐的做法：

首先创建一个负责共享数据的服务：

myModule.service('SharedDataService', function() {
  // 初始化共享变量
  this.variable1 = 1;

  // 封装修改和获取方法（可选，但更规范，方便后续扩展逻辑）
  this.setVariable1 = function(value) {
    this.variable1 = value;
  };

  this.getVariable1 = function() {
    return this.variable1;
  };
});

然后修改两个控制器，注入这个服务来读写变量：

myModule.controller('NumOneController', ['$rootScope', '$scope', 'SharedDataService', function ($rootScope, $scope, SharedDataService) { 
    // 从服务获取初始值
    $scope.variable1 = SharedDataService.getVariable1();

    // 用$watch监听服务变量的变化，实现实时同步
    $scope.$watch(function() {
      return SharedDataService.variable1;
    }, function(newVal) {
      $scope.variable1 = newVal;
      console.log("NumOneController里的variable1已更新为：", newVal);
    });

    $scope.$on('NumOne', function (e, opt) { 
        // 直接从服务拿最新值
        var valueselected = SharedDataService.getVariable1(); 
        console.log(valueselected); // 现在会输出2啦
    }); 
} ]); 

myModule.controller('NumTwoController', ['$rootScope', '$scope', 'SharedDataService', function ($rootScope, $scope, SharedDataService) { 
    $scope.OpenPage = function (menuItem, PageReload){ 
        // 通过服务修改变量
        SharedDataService.setVariable1(2);
        // 也可以直接修改（如果不需要封装逻辑的话）
        // SharedDataService.variable1 = 2;
    }; 
} ]);

如果是简单场景，也可以用全局的$rootScope来共享，但要注意全局变量容易造成状态污染，不适合复杂项目：

myModule.controller('NumOneController', ['$rootScope', '$scope', function ($rootScope, $scope) { 
    // 把变量放到全局rootScope里
    $rootScope.variable1 = 1;

    $scope.$on('NumOne', function (e, opt) { 
        var valueselected = $rootScope.variable1; // 从rootScope获取最新值
    }); 
} ]); 

myModule.controller('NumTwoController', ['$rootScope', '$scope', function ($rootScope, $scope) { 
    $scope.OpenPage = function (menuItem, PageReload){ 
        // 修改全局rootScope的变量
        $rootScope.variable1 = 2;
    }; 
} ]);

如果只是修改后需要通知一次，不需要实时同步，可以用事件广播的方式：

myModule.controller('NumOneController', ['$rootScope', '$scope', function ($rootScope, $scope) { 
    $scope.variable1 = 1;

    // 监听更新事件，接收最新值
    $scope.$on('variable1Updated', function (e, newValue) {
      $scope.variable1 = newValue;
      console.log("收到更新：", newValue);
    });

    $scope.$on('NumOne', function (e, opt) { 
        var valueselected = $scope.variable1; // 现在是最新值了
    }); 
} ]); 

myModule.controller('NumTwoController', ['$rootScope', '$scope', function ($rootScope, $scope) { 
    $scope.OpenPage = function (menuItem, PageReload){ 
        var newValue = 2;
        // 广播事件给所有子作用域
        $rootScope.$broadcast('variable1Updated', newValue);
    }; 
} ]);

简单总结下：你之前的核心问题是两个控制器的$scope各自维护了一个variable1副本，修改其中一个不会影响另一个，所以换用共享服务、全局rootScope或者事件广播就能解决啦。

内容的提问来源于stack exchange，提问作者useruser00