Javascript 等待AngularJS 1中动态加载的外部脚本

因为我从内部API获取外部API密钥，所以我想在app.js文件中动态加载外部脚本

import common from './common';

angular.module('app', [common])
  .run(['$rootScope', 'configService', ($rootScope, configService) => {
    $rootScope.googleApiIsReady = false;
    configService.getConfig().then((res) => {
      let script = document.createElement('script');
      script.setAttribute('type', 'text/javascript');
      script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=' + res.data.GOOGLE_MAP_API_KEY + '&libraries=places&language=en-US');
      document.getElementsByTagName('head')[0].appendChild(script);
      $rootScope.googleApiIsReady = true;
    }); 
  }]) 
;

上面的代码示例工作正常（外部库加载到源代码中），但我不知道如何在控制器或指令中处理它，以等待它在执行某些指令之前正确加载

我有一个表单页面，使用这个API自动完成输入。如果我直接刷新此页面，则在自动完成指令实例化失败之前，应用程序没有时间加载此外部库。我需要找到一种方法来等待库加载，或者在指令加载后重新关联该指令，或者找到一种更干净的方法来加载库

module.directive("autoComplete", function($rootScope) {
  return {
    restrict: 'A',
    link : function(scope, elm, $attrs) {
       $rootScope.$watch('googleApiIsReady', function() {
         if ($rootScope.googleApiIsReady) {
           ...
         }
       }, true);  
    }
  };
});

---

正如@lakshay所建议的，解决方法是在更改根作用域值之前应用超时

setTimeout(() => {
  // Wait 1 sec before active auto completion for the google map libs to be loaded.
  $rootScope.googleApiIsReady = true;
}, 1000);

---

外部api正在.run（）中加载。它应该尽快加载应用程序加载，因此我不认为是否有任何应用等待的需要。你面临任何问题吗？我已经完成了这个问题。为什么不在index.html文件中添加脚本我做不到，因为我需要脚本元素url中的API键（我从服务中获得）。然后在指令上应用超时