CODEWITHSUNDEEP
angularjsangularjs-directiveng-animate
Mark Hill
Mark Hill

Reputation: 1849

$compile issue with dynamic backdrop in directive

I have built a directive that generates a sliding menu. It's still a work in progress but I have ran into a small issue I want to tackle first before anything that I started to notice.

I will start by giving you the fiddle of it so that you can follow along:

https://jsfiddle.net/chdbxt1h/19/

Starting at line 70 under the javascript you will see:

element.on('mousedown', function(){
                body.attr("ng-class", "menu-overlay");  
                $compile(body)(scope);
                \\ code continues on from here

The issue is with the $compile(body)(scope) line. Everytime I do the click event, it will obvious compile the body. What this does is begins to repeat the process of showing <!ng-if blah blah blah ... and it will start to show these different if directives about 30 or 40 times more and the menu becomes laggy. This is obviously not optimal.

My first question is, why is it that when I remove the compile everything breaks?

My second question is, is there another way to make it so that I can dynamically generate the ng-class directive on the body so that my menu works fluidly, without the compile or so that I won't get the repeat directives over and over?

My third question, am I going about this the right way? Have I built my application incorrectly?

Upvotes: 1

Views: 52

Answers (0)

Related Questions