fritzvd

Last time I wrote something about something very simple, but something I really enjoy. Conditional classes and inline event handlers. It’s not a very difficult or complex feature. But I did not find a lot of writing about it. And also it saved me loads of jQuery statements that you don’t want in a controller, but in the UI.

Next up: Directives.

Directives are pret-ty awesomevilles. For the “stop/play video player like”-thing we are building, we would like to have a timeline or time slider, to go back to a previous images. Normally this would be a jQuery (jQuery UI) call like so:

<div id="id-of-div-or-wha-evah"></div>

$('#id-of-div-or-wha-evah').slider()

Which would be fine if you need only one of these, or if you would have a small app. With an Angular Directive it becomes a bit more complex, but also a lot more useful. Our product is a groundbreaking flooding model. Basically you can run a super fast flooding simulation in the cloud and look at the results on-the-fly in your browser. With every simulation step the complete timeline becomes longer, thus we need a timeline that can listen to other states and messages in our application. Because all the states and messages are already in the app, I don’t want to jQuery my way out of this one.

So I created the following HTML component and angular directive.

If you’re to lazy to look up the docs, I’ll give you some pointers. The most important thing to notice here is that the directive and the html element correspond because of the title. The html tag: is recognized by the jqSchlider directive defined in angular because of the restrict: ‘E’ line. The E stands for element but can also be replaced by something else (look in the docs) if that has your fancy.

The HTML attributes max and at are picked up by the directive as variables. The values come from the Controller in which the jqSchlider will be inserted.

The fiddle below is a working example:

Get this btw it’s great: