使用LESS js爲AngularJS指令渲染CSS

Question

我正在構建一個AngularJS指令，並且我希望它具有由LESS js生成的自己的CSS文件。我無法在服務器端使用LESS生成文件，現在只能使用客戶端。我所做的是將帶有LESS腳本和我的樣式表的代碼放在app.run模塊中 - 下面的代碼。

問題是，在LESS完成呈現CSS文件之前，指令的模板已經加載，所以在這段時間內（沒有太多，但足夠），您可以看到原始和醜陋的指令模板。

我想：

1. NG-斗篷上的模板
2. 試圖找出哪些事件射擊時LESS結束，推遲執行，直到然後。但是我沒有找到事件，而且我也沒有找到如何延遲模板顯示。
3. 將$document注入到指令中，並在那裏查找我生成的樣式表作爲生成CSS的指示符。

這是我現在：

angular.module('angularTablesorter', []) 
.run(function($document) { 
     var link = document.createElement('link'); 
     link.rel = 'stylesheet/less'; 
     link.href = 'css/myStyleSheet.less'; 
     $document[0].head.appendChild(link); 

     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'js/less.min.js'; 
     $document[0].head.appendChild(script); 



}) 
.directive('ngTablesorter', ['$document', function($document) { 
    return { 
     restrict: 'E', 
     link: function (scope, elem, attrs) { 
      /*Directive code goes here*/ 
     } 
    }; 
}]); 

正是我試圖做甚至有可能？ 謝謝！

Answer 1

使用visibility: hidden;在less樣式之前加載一個風格（甚至可以在線使用<style>，然後將其覆蓋在less風格。