javascript - 加载脚本 "dynamically"时出现 Angular $injector 错误

Question

当我将脚本动态加载到页面时遇到问题。目前，我们有两个独立的项目，一个 SharePoint 应用程序和一个“CDN”网站，我们在其中托管所有内容文件(js、css、图像等)。

由于这些项目被分成多个项目，我们必须在加载脚本的方式上发挥创意(确保如果我们浏览 Sharepoint 项目的开发环境，它会从 CDN 的开发环境加载内容)

这是我们用来动态加载脚本标签的脚本:

    <script type="text/javascript">
        var ReferenceLoader = (function () {
            var cdnUrl = {
                'devSPDomain': 'https://devCDN/',
                'testSPDomain': 'https://testCDN/',
                'prodSPDomain': 'https://prodCDN/'
            },
            baseUrl = cdnUrl[window.location.host] || 'https://prodCDN/';

            this.InsertReference = function (sources, type) {
                sources = [].concat(sources); // make sure it's an array
                type = type || 'script'; // default to script

                switch (type.toLowerCase()) {
                    case 'script': InsertScriptReference(sources); break;
                    case 'style': InsertStyleReference(sources); break;
                    default: console.log('Invalid type supplied to \'InsertReference()\'');
                }
            };

            function InsertScriptReference(sources) {
                for (var i = 0; i < sources.length; i++) {
                    var s = document.createElement('script'),
                        src = baseUrl + sources[i];

                    s.setAttribute('type', 'text/javascript');
                    s.setAttribute('src', src);

                    document.head.appendChild(s);
                }
            }

            function InsertStyleReference(sources) {
                for (var i = 0; i < sources.length; i++) {
                    var s = document.createElement('style'),
                        src = baseUrl + sources[i];

                    s.setAttribute('rel', 'stylesheet');
                    s.setAttribute('href', src);

                    document.head.appendChild(s);
                }
            }

            return this;
        })();
    </script>

然后在任何给定页面上我们像这样使用它:

<script type="text/javascript">
    var scripts = [
        'dist/js/plugins/chart/0.0.1/chart.min.js',
        'dist/js/shared/services/util/0.0.1/utilServices.min.js',
        'dist/js/components/home/0.0.4/home.min.js'
    ];

    ReferenceLoader.InsertReference(scripts);
</script>

现在一切都很好，我可以在页面上看到它成功地将脚本/链接标签放入 head 元素中，但是我得到了 angular injector error 。我 110% 肯定正在加载包含模块的文件，如果我只是做一个普通的脚本标记，直接指向我的页面上的它(在头部或正文中)，它就可以正常工作。有什么想法吗？

这是一个plunker显示问题

Answer 1

我最终通过做两件事解决了这个问题:

• 向 InsertReference 添加一个回调参数，该参数被称为元素的 .onload/.onreadystatechanged 事件，以便每次脚本完成加载时都会执行
• 从应用程序中删除 ng-app 标记，并在所有脚本文件加载完成后手动引导它