angularjs - 在加载模块 Controller 之前，如何从远程服务器将一些数据加载到 $rootScope 中？

Question

我的模块有一个依赖于 $rootScope.foo 的 Controller ，该 Controller 通过使用 $http 服务进行填充。 我的问题是如何确保在加载 Controller 之前填充$rootScope.foo。

我尝试在模块的 run() 方法中加载 $rootScope.foo:

myModule.run(function($rootScope, $http, $location) {
  $http.get("http://mydomain/load_user/").
    success(function(respData) {
      $rootScope.foo = respData.foo;
    });
});

但是它不起作用，因为 Controller 在 success() 内部的代码之前加载。

Answer 1

$http 服务是使用 Promise 实现的。

您在 success 处理程序中编写的代码将在 promise 解决时运行。由于 Promise 的异步特性，这种情况何时发生是未知的。可以晚1秒，也可以晚10秒。

与此同时，您的其他代码继续运行，并且您的 Controller 可能在 promise 解决之前加载。

解决这个问题的最佳方法是以“异步”的方式思考，而不是强制某种同步行为。

以下是一些有效的选项:

1. 您可以将代码移至 Controller ，并将逻辑移至成功处理程序，如下所示:

   myModule.controller('SomeCtrl', function($rootScope, $http, $location) {
     $http.get("http://mydomain/load_user/").
       success(function(respData) {
         // Perform any logic you need here and use respData.foo;
       });
   });
   

2. 另一种方法是在 Promise 得到解决(并且数据已从服务器加载)时使用事件来通知 Controller ，如下所示:

   myModule.run(function($rootScope, $http, $location) {
     $http.get("http://mydomain/load_user/").
       success(function(respData) {
         $rootScope.foo = respData.foo;
   
         // Broadcast event that foo was updated
         $rootScope.$broadcast('fooWasUpdated'); 
       });
   });
   

   然后在您的 Controller 中，您可以添加事件的监听器:

   myModule.controller('SomeCtrl', function($scope, $rootScope) {
   
     $scope.$on('fooWasUpdated', function(event){
       // Perform your logic with $rootScope.foo
     });
   
   });
   

3. 第三种方法是根本不使用 $rootScope，而是使用事件来通知监听器并通过事件传递数据，如下所示:

   myModule.run(function($rootScope, $http, $location) {
     $http.get("http://mydomain/load_user/").
       success(function(respData) {
         // Broadcast event that foo was updated
         // You can add data as extra arguments
         $rootScope.$broadcast('fooWasUpdated', respData.foo); 
       });
   });
   

   然后在您的 Controller 中，您可以添加事件的监听器:

   myModule.controller('SomeCtrl', function($scope, $rootScope) {
   
     $scope.$on('fooWasUpdated', function(event, foo){
       // Perform your logic with foo instead of $rootScope.foo
     });
   
   });
   

   您可以在 AngularJS documentation for scopes 中找到有关 $broadcast 和 $on 的更多详细信息。 .

使用事件的一些好处是:

• 您的应用程序中可以有多个监听器监听同一事件
• 您不必担心是否处于 AngularJS 的正确范围内
• 您不必将数据存储在某个范围内以使其在其他地方可用

希望有帮助!