javascript - 使用 LESS js 为 AngularJS 指令渲染 CSS

Question

我正在构建一个 AngularJS 指令，我希望它拥有由 LESS js 生成的自己的 CSS 文件。我无法在服务器端使用 LESS 生成文件，目前只能使用客户端。我所做的是将带来 LESS 脚本的代码和我的样式表放在 app.run 模块中——代码如下。

问题是，指令的模板在 LESS 完成渲染 CSS 文件之前加载，所以在这部分时间(不多，但足够)你可以看到原始和丑陋的指令模板。

我试过:

1. 模板上的 ng-cloak
2. 尝试找出 LESS 完成时触发的事件并延迟执行直到那时。但是我没有找到事件，也没有找到延迟显示模板的方法。
3. 将 $document 注入(inject)指令并在那里查找我生成的样式表，作为 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 样式覆盖它。