“动态”加载脚本时出现 Angular $injector 错误答案

【问题标题】：Angular $injector errors when scripts are "dynamically" loaded“动态”加载脚本时出现 Angular $injector 错误
【发布时间】：2015-12-08 20:00:15
【问题描述】：

我在将脚本动态加载到页面时遇到了问题。目前我们有两个独立的项目，一个 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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

我最终通过做两件事来解决这个问题：

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

【讨论】：

【解决方案2】：

我认为您请求文件的方式很好，但是由于文件缩小，可能会产生注入错误。您必须使用 Minification-safe 控制器声明：

var myController = function(anyVariableName, $http) {
  //We included $scope and the $http service into our controller.
  //Since we set up the $inject attribute on our controller, it doesn't matter what variable names we use.
}

myController.$inject = ['$scope', '$http']

看看这里：http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/

【讨论】：

不幸的是不是这样，一切都被适当地缩小了。