javascript - 在加载页面时从指令编译 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

不要使用链接函数来渲染它，而是使用指令的 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
    };
});