使用 LESS js 渲染 CSS for AngularJS 指令

>我正在构建一个AngularJS指令，我希望它有自己的CSS文件由LESS js生成。我无法在服务器端使用 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*/
        }
    };
}]);

我正在尝试做的事情甚至可能吗？谢谢！