javascript - Compiling HTML string from directive at the time of loading the page -
in html:
<vs-context-menu id="contextmenu" class="dropdown-menu pointer-cursor" context-menu-hide></vs-context-menu>
in angular js directive:
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); } }; });
context menu showing on click fine. flashes @ loading of page. how hide @ loading of page?
instead of rendering using link function, use template
parameter of directive, not show flickering effect & add ng-cloak
on element.
directive
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 }; });