在加载页面时从指令编译 HTML 字符串

Question

在Html中：

<vs-context-menu id="contextMenu" class="dropdown-menu pointer-cursor" context-menu-hide></vs-context-menu>

在angular JS指令中：

directive('vsContextMenu', function ($compile) {
    var defaultTemplate = '<ul style="list-style-type: none; padding-left: 20px;" ><li>AA</li></ul>';

    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
              element.html(defaultTemplate).show();
              $compile(element.contents())(scope);
        }
    };
});

单击正常时会显示上下文菜单。但是它在页面加载时闪烁。如何在页面加载时隐藏？

Answer 1

不要使用 link 函数渲染它，而是使用指令的 template 参数，这将不会显示闪烁效果并且还会在该元素上添加 ng-cloak。

指令

directive('vsContextMenu', function($compile) {
    var defaultTemplate = '<ul ng-cloak style="list-style-type: none; padding-left: 20px;" ><li>AA</li></ul>';
    return {
        restrict: 'E',
        template: defaultTemplate
    };
});

在加载页面时从指令编译 HTML 字符串

Compiling HTML string from directive at the time of loading the page

html

javascript

contextmenu

angularjs

angularjs-directive