javascript - 如果将包含 Controller 代码的 javaScript 动态添加到 HTML dom，则 Controller 不会加载

Question

这里是一个示例代码:我在 html body 末尾有以下代码

<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，如果我在Chrome中检查body标签，脚本将作为子标签添加到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>

有没有办法让我的第一个代码在不添加超时的情况下工作？

Answer 1

您可以将脚本标记的onload属性设置为myFunction()。引用MDN page on HtmlScriptElement了解更多信息和类似于下面修改后的代码片段的示例。另外，请参阅 this example plunker 中使用它.

同样，您可以将onerror属性设置为一个函数，用于在发生错误时处理情况。由于此代码是异步的，因此您可以使用 Promises - 参见this example .

<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>