Question

我真的需要在bootstrapping angular之前加载一些数据。出于这个原因，我创建了一个run块/在这个run块中我调用了一个服务上的方法，该服务从服务器加载一些数据。由于这是一个异步调用，JavaScript会在执行时进一步执行，这会在我的应用程序中产生一些未定义的对象。

我正在使用路由，但不能使用resolve属性。

有人可以提供一个关于如何在run区块中等待承诺准备的解决方案吗？

编辑：

感谢给定的答案，我通过手动引导角度来解决它：

$(document).ready(function () {
    $.ajax('/Data/GetDropdownData', {type:'POST'}).done(function (response) {
        app.run(['ListService',  function (ListService) {
            ListService.setData(response);
        }])

        angular.bootstrap(document, ["sma"]);
    })
})

Answer 1

您可能需要查看this问题 - 它显示了如何使用异步数据初始化AngularJS服务。

Here是该问题的一个例子，显示使用AngularJS服务（如$ http）加载配置然后进行进一步初始化。

This回答有一个很好的解释，并显示了一个等待DOM加载的例子（来自该答案的plunkr示例是here）：

angular.element(document).ready(function() {
  angular.bootstrap(document);
});

Answer 2

正如我评论的那样将它放在这里

您可以尝试manual bootstrap

<script> 
   angular.element(document).ready(function() {
      angular.bootstrap(document); 
   });
</script>

在这种情况下，您无法使用控制器和获取数据的角度方式。我认为你必须通过jQuery加载你的数据，在jquery回调中引导你的角度，然后用你从jquery获得的数据初始化你的范围变量。

Answer 3

我想唯一的解决方案是manually bootstrap你的应用程序。也许您可以在这个问题Delay Angular App Initialization和这篇小文Manually bootstrapping AngularJS for asynchronous loading in Internet Explorer中找到一些帮助。

如上一篇文章所述，要做一个手动引导程序：

angular.element(document).ready(function() {
  angular.bootstrap(document, ["myApp"]);
});

请务必删除ng-app中HTML的所有内容，以停止自动引导。

Answer 4

另一个解决方案，因为我不会省略我的部分应用程序，但我仍然需要等待加载的东西。

bootstrap指令（不隶属于twitter bootstrap）：

myApp.directive('myBootstrap', function() {
  return {
    scope: {
      promise: '=myBootstrap'
    },
    template: '<div ng-if="ctrl.isReady" ng-transclude></div>',
    controllerAs: "ctrl",
    transclude: true,
    controller: function($scope) {
      var ctrl = this;
      ctrl.isReady = false;

      //else an array of promises can be filled by a service
      $scope.promise.then(function() {
          ctrl.isReady = true;
      });
    }
  };
});

和相关的plnkr：http://plnkr.co/edit/vx4aWS?p=preview

如何在AngularJS的Run块中等待一个promise？

4 个答案: