在運行時加載角度指令

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

默認情況下，角度引導應用程序在DOM Ready事件上。當你異步加載腳本時，這個事件可以在腳本加載之前觸發，所以當DOM爲$ compiled（）時，角度不會知道它們包含的指令。

有很多方法可以解決這個問題，但他們都是圍繞推遲編譯DOM直到加載所需的模塊。

簡單的（但不是唯一的）推遲編譯應用程序片段的方法是簡單地使用ng-if。在僞代碼，它會是這個樣子：

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

這使你首先要弄清楚如何確定一個特定的腳本已加載和獲取信息到您的角度應用程序的任務。

不幸的是，這不是微不足道的。你可以自己寫這個，但其他人已經爲你做了，你可能會更好使用這些經過測試的跨瀏覽器解決方案之一。

require.js想到的是一個選項，但也有許多其他的工作也會奏效。