Question

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

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

我试过了：

ng-cloak
尝试找出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*/
        }
    };
}]);

我想要做的甚至可能吗？谢谢！

Answer 1

在visibility: hidden;样式之前加载的样式中使用less（甚至可以使用<style>内联，然后以less样式覆盖它。

在为AngularJS指令

1 个答案: