Question

我在app.run()期间拨打了一项服务，出于某种原因，当我将文件加载为异步时，他们似乎无法接受。

这是我使用的服务：

angular.module('nav').service('SubmoduleService', ['submodules_config', 
    function(config){
        this.autoload = function(){
            for(var key in config.modules){
                    for(var i=0; i<config.modules[key].length; i++){
                            var src = config.modules[key][i].replace(':path', config.path).replace(':name', key);
                            console.log(src);
                            var js = document.createElement("script");

                            js.type = "text/javascript";
                            js.src = src;

                            document.body.appendChild(js);
                    }
            }

            return true;

    };
}]);

这是配置文件：

angular.module('nav').constant('submodules_config', {
    path: "scripts/submodules/:name",
    modules: {
            gallery: [':path/config.js', ':path/directive.js']
    }
});

所以基本上配置定义了一个模块以及需要为该模块加载的所有文件。

我看到文件被加载到DOM中，但由于某种原因，当我加载使用该指令的控制器时，它不起作用。

注意：该指令在明确加载文件时有效。

感谢任何帮助。

电子

Answer 1

默认情况下，angular会在DOM Ready事件上引导应用程序。当您异步加载脚本时，可以在脚本加载之前触发此事件，因此当DOM为$ compiled（）时，angular将不知道它们中包含的指令。

有很多方法可以解决这个问题，但它们都围绕着推迟编译DOM，直到加载了所需的模块。

简单（但不是唯一）推迟编译应用程序片段的方法是简单地使用ng-if。在伪代码中，它看起来像这样：

<div ng-if="moduleWithMyDirectiveLoaded" my-directive></div>

这使您完成了如何确定是否已加载特定脚本并将该信息输入角度应用程序的任务。

不幸的是，这不是微不足道的。您可以自己编写，但其他人已经为您完成了这项工作，您可能最好使用其中一种经过测试的跨浏览器解决方案。

require.js作为一种选择浮现在脑海中，但还有许多其他方法也可以使用。

在运行时加载角度指令

1 个答案: