在运行时加载角度指令

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 中，但由于某种原因，当我加载使用该指令的控制器时，它不起作用。

注意：该指令在显式加载文件时起作用。

感谢任何帮助。

E

Answer 1

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

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

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

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

这让您的任务是弄清楚如何确定是否已加载特定脚本并将该信息获取到您的 Angular 应用程序中。

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

require.js 是一个选项，但还有许多其他选项也可以。