Блог

Вот пример кода: у меня есть следующий код в конце тела html

 <script type="text/javascript">
    var js = document.createElement("script");
    js.src = "forms/dynamicForms/sampleFormController.js";
    document.body.appendChild(js);
    angular.bootstrap(document, ['MyApp']);
</script>
  

Когда я запускаю свое приложение, sampleFormController не найден, если я проверяю тег body в Chrome, скрипт добавляется в качестве дочернего тега к тегу body.

где, как когда я изменяю код и добавляю тайм-аут, это работает

 <script type="text/javascript">
    var js = document.createElement("script");
    js.src = "forms/dynamicForms/sampleFormController.js";
    document.body.appendChild(js);
    setTimeout(myFunction, 2000);
    function myFunction() {
    angular.element(function() {
        angular.bootstrap(document, ['MyApp']);
      });
    }
</script>
  

Есть ли способ заставить мой первый код работать без добавления тайм-аута?

Вы можете установить для свойства onload тега script значение myFunction() . Обратитесь к странице MDN в HtmlScriptElement для получения дополнительной информации и примера, подобного приведенному ниже фрагменту измененного кода. Также посмотрите, как это используется в этом примере plunker.

Аналогичным образом, вы можете присвоить свойству onerror значение функции для обработки случая возникновения ошибки. И поскольку этот код является асинхронным, вы могли бы использовать Promises — смотрите этот пример.

 <script type="text/javascript">
    var js = document.createElement("script");
    js.src = "http://elliott.andrewz.org/data/sampleController.js";
    document.body.appendChild(js);
    js.onload = myFunction;
    function myFunction() {
        angular.element(function() {
            angular.bootstrap(document, ['MyApp']);
      });
    }
</script>