Question

当我将脚本动态加载到页面时，我遇到了一个问题。目前，我们有两个独立的项目，一个是SharePoint应用程序，一个是CDN＆＃34;我们托管所有内容文件（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标记，并在完成所有脚本文件加载后手动引导

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

当脚本动态地＆＃34;动态地＆＃34;加载

2 个答案: