02 August 2014

AngularJS directive for slide-down animation with lazy rendering

AngularJS directive for slide-down animation with lazy rendering

In this blog post I am going to talk about a directive I created earlier that is available in my ng-slide-down Github repository.

In the company I am working for we have a lot of widgets that are expanded via jQuery "slideToggle" function, thus when I make new components I have to adhere to existing style. As you have probably guessed new parts are written in Angular.

Another requirement I had to satisfy is that we can have a lot of these widgets on a single and rendering them all in Angular would be wildly inefficient, so it had to only render HTML if widget was expanded.

In order to use resulting directive all you need to is to add a directive ng-slide-down to your HTML element and pass a variable that is going to control it:


<div ng-slide-down="slideDown">

Code

So let's start writing the code (fiddle).


Lazy rendering

In the next step we are going to add an option to stop angular from rendering HTML unless element is expanded


<div ng-slide-down="slideDown" lazy-render>


Final steps

Now we need to take care of a few extra details. Like, for example, what should we do if user closes widget before it's been fully expanded? In this case we should cancel promise. Another case we need to take care of is change in children's height. Final code looks as following

P.S.

Make sure to update your Angular JS because older versions contain bug (fixed) in the way ng-transclude and ng-if directives interact.

Be careful in general when you are using ng-if because it creates new scope.

1 comment:

  1. I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting angular training

    ReplyDelete