Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create an AngularJS directive that does not immediately render?

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

  • Currently I append a hidden element. However the directive is used very frequently, so hundreds of data <-> DOM bindings occur, and the page slows down to the point of becoming unusable.
  • I would like to only actually load the template, and append the elements when mouseovered.

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)
                    }
                });
            }
        }   
    }
like image 381
mikemaccana Avatar asked Jul 17 '13 13:07

mikemaccana


1 Answers

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.

like image 74
tnunamak Avatar answered Nov 09 '22 23:11

tnunamak