Create an AngularJS directive that doesn't immediately display?

Question

I have a simple AngularJS directive with templateUrl . The directive is intended for a tooltip.

• I am currently adding a hidden element. However, the directive is used very often, so a hundred data DOM bindings occur , and the page slows down to the point of unsuitability for use .
• I would only like to load a template and add elements on hover.

Reading angular docs seems to have no way to render directive-delayed rendering . Did I miss something?

// Tooltip directive   return function(){   return {     templateUrl: 'someTemplate.html',     replace: false, // Append our tooltip, rather than replace the element contents.   link: function (scope, element, attrs) {   $element.on({     mouseenter: function () {     // Would like to render, and set up bindings, here (my question)   },     mouseleave: function () {     // Destroy rendered element here (simple stuff, not my question)   }   });   }   }   } 

Answer 1

I suppose you will need to implement the $compile service to do something similar inside your callback:

 templateMarkup = '<p> {{ property }} </p>'; $compile(templateMarkup)(scope); 

I have not thought out the exact steps to match this in your code, but let me know if this is helpful.