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

Question

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

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

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

但它不起作用，因为控制器在success().

Answer 1

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

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

同时，您的其他代码继续运行，并且您的控制器可能在承诺解决之前被加载。

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

以下是一些有效的选项：

1. 您可以将代码移动到控制器并将逻辑移动到成功处理程序，如下所示：

   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 已解决（并且数据已从服务器加载）时通知您的控制器，如下所示：

   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'); 
       });
   });
   

   然后在您的控制器中，您可以为事件添加一个侦听器：

   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); 
       });
   });
   

   然后在您的控制器中，您可以为事件添加一个侦听器：

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

   您可以在AngularJS 文档$broadcast中找到有关 scopes的更多详细信息。$on

使用事件的一些好处是：

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

希望有帮助！