2015-03-03 88 views
0

我有一个服务,我在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

回答

0

默认情况下,角度引导应用程序在DOM Ready事件上。当你异步加载脚本时,这个事件可以在脚本加载之前触发,所以当DOM为$ compiled()时,角度不会知道它们包含的指令。

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

简单的(但不是唯一的)推迟编译应用程序片段的方法是简单地使用ng-if。在伪代码,它会是这个样子:

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

这使你首先要弄清楚如何确定一个特定的脚本已加载和获取信息到您的角度应用程序的任务。

不幸的是,这不是微不足道的。你可以自己写这个,但其他人已经为你做了,你可能会更好使用这些经过测试的跨浏览器解决方案之一。

require.js想到的是一个选项,但也有许多其他的工作也会奏效。

+0

我很熟悉要求。我只是不喜欢在我的所有文件中使用闭包系统。我只是寻找一种简单的方法来选择在引导时加载模块。 – 2015-03-04 17:11:20