在AngularJS指令的CSS渲染中使用LESS js

Question

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

問題在於，該指令的模板在LESS完成呈現CSS文件之前就已加載，因此在這部分時間（雖然不多，但足夠），您可以看到原始且難看的指令模板。

我試過了：

1. 模板上的ng-cloak
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樣式覆蓋它。