I have a simple AngularJS directive with a templateUrl. The directive is for a tooltip.
Reading the angular docs, there doesn't seem to be any way of making a directive delay rendering. Am I missing something?
// Tooltip directive
return function(){
return {
templateUrl: 'someTemplate.html',
replace: false, // Append our tooltip, rather than replace the element's 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)
}
});
}
}
}
I believe you are going to need inject the $compile
service to do something like this inside your callback:
templateMarkup = '<p> {{ property }} </p>';
$compile(templateMarkup)(scope);
I haven't thought through the exact steps to fit this into your code but let me know if that would be helpful.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With