NETEYE Activity Indicator directive for angularJS

Part of the KoLite tools created by John Papa for knockoutJS was the activity indicator. The nice thing about it (as it claims) is that it supports starting IE 6.0 (ughhhh….) For those who don’t have the luxury of developing for modern browsers ONLY  (i.e. CSS3 animations), this utility is very appealing. 

image

Requirements

I haven’t fully wrapped my head around angularJS directives yet, so I decided to make this as a small assignment. I came up with 2 methods to create the directive. I called the directive indicator.

Given this html markup:

image

And controller:

image

#1 Without Using Scope

I was quite satisfied with my first approach, as I finally removed “hard-coding” string names inside the directive declaration which could be problematic if the html markup values doesn’t match my hard-coded statements inside the directive. With the “pattern” shown below, all the directive “user” has to do is to make sure the html markup attribute matches the directive id (circled in green).

image

#2 Using Scope

To further my experiment with directives, I changed up the directive declaration a bit, so that it uses “scope” in the hopes of making it a reusable friendly code down the road…

I declared a scope “property” named “show” and have it 2-way databound to whatever the html attribute name was as declared in the view (the name of the directive). This way I figure the link function will always have to deal with show scope property. If you look up the documentation, this was achieved by using the “=” sign (set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute).

image

It’s like magic, the scope variable inside the link function (context)  gets added with a new property named show and is bi-directionally bound to the parent scope – meaning, show will automatically change, if the parent scope changes (vm.isBusy in our case). Likewise, if we have a code inside our directive that changes “show”, vm.isBusy gets changed as well.

For example, we want “show” to be back to “false” after a few seconds of being “true”, we could write the directive something like as shown below. When the $timeout expires, the activity indicator disappears, and the checkbox also becomes unchecked…

image

Head over to Github to fork out the code.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.
Tagged with: , ,
Posted in angularJS