Binding pure boolean values to scope in isolated Angular directives

You’ve got an isolated element directive that needs to get values from attributes onto an isolated scope. Cannot be any simpler ? Well turns out there is a small surprise in store for you. All your variables are bound smoothly but when you assign a literal ‘true’ as the value it just refuses to convert that to Boolean before binding.

Lets uncover whats happening beneath and see if we have any simple hack around it.

The compile function hits first and before the pre and the post get a chance the controller would initiate the scope, and all the allied initialization logic. Pre and Post then follow to let you do some HTML edit before and after the scope is linked to the elements respectively.

Isolated directives are simpler , in a sense all what you need to know are the simple symbols like ‘=’, ‘@’ ,’&’ and boom! angular would graciously evaluate all the html attributes with the scopeĀ items

You may be really impressed with this feat of angular until you encounter a small pit that feels edgy and sharp around the corners.

Supply some clean Boolean values to the manifestation of the directive and angular picks up that just like any other string bypassing the evaluation of the same.

Here is what is the code looking like :

codeSnippet1

Pre function to the rescue :

Time to get out your expensive adept tool set and start putting those things together. All what needs to be fixed is that you have to tell Angular how exactly “he” (not being a anti-feminist here in the personification but Angular is just too hard to comprehendĀ at times so the impression :)) should be processing that attribute.

There are times you have to dig deeper and use lower level services of angular to get things done. With the crustal tools available it is just too much work to do the heavy lifting.

codesnippet2

$eval ( ) in the pre function (you could very well use this in the post as well, but why delay when you have everything at hand pre linking?) should do the trick here. Now there are couple of other hacks around this, but this one is my personal favorite

And one another hack, of course this could work

codeSnippet3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: