Javascript 在呈现CSS for AngularJS指令时使用较少的js

我正在构建一个AngularJS指令，我希望它能够由更少的js生成自己的CSS文件。我无法在服务器端使用更少的资源生成文件，目前只能使用客户端。我所做的是把代码放在下面的app.run模块中，这样可以减少脚本和我的样式表

问题是，指令的模板是在LESS完成CSS文件渲染之前加载的，因此在这段时间内（不多，但足够），您可以看到原始和丑陋指令的模板

我试过：

在模板上隐藏斗篷

尝试找出在LESS完成时触发的事件，并将执行延迟到该时间。但是我没有发现这个事件，我也没有发现如何延迟模板的显示

将

$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*/
        }
    };
}]);

我想做的是可能的吗？

---

谢谢

使用

可见性：隐藏less

样式之前加载的样式中的code>（甚至可以使用

内联，然后在

less

样式中重写它）