Angular Directives

Angular directives are the little snippets of Angular you put in your HTML. They call the Angular code - er, bind the functionality - in the places on the page where you want things to happen.

Built-in Directives

I've been exposed to ngApp which is the basic connection between HTML and the Angular code, setting the root element of the application. Then ngController connects the controller to the view. ngRepeat allows for looping through a collection using a template. ngClick specifies behavior for when the user clicks an element on the page. ngShow shows or hides an HTML element based on an evaluated expression.

There are a couple of directives from the UI-Router plug in I've used also. These are ui-view which places the view templates on the page and ui-sref which bind <a> tags to a state.

Custom Directives

You can make your own directives too. We can reference them in four ways from the HTML:

1. You can set them equal to an expression, so the directive fires if the expression is true (truthy)
2. You can also apply a class via the directive if an expression is true
3. The third reference is using the directive as an element itself via a custom tag name
4. You can invoke a directive via comments

The Element and Attribute (options 3 and 1 respectively) are the officially encouraged methods for directives.

Murder was the Case

Directives are written in camelCase but referred to in HTML as dash-delimited. HTML is not case sensitive so Angular will change dash-delimited to camelCase on compile. Also if you are making your own directives be sure to name-space them with something unique to avoid needless and hard to diagnose errors when you have overwritten other functionality.

Making a Directive

There are three key ingredients:

1. You need to create a js file with a self-executing anonymous function that holds your directive goodies
2. You need the template that your directive is referencing - just an HTML partial
3. In your index.html you need the directive reference to link your website to the directive

The directive itself has a number of attributes, including the url of the template, scope and link, where the directive logic lives. The scope - declared with an empty pair of brackets for 'isolate-scope' - then automatically executes the function inside the link attribute.

Link Arguments

The function in link has a very specific set of arguments that it takes:

First argument: The scope object. The scope object methods and attributes are accessible within the directive.

Second argument: The 'jqLite-wrapped element.' jqLite is a built-in, lightweight version of jQuery that comes with Angular. It is designed for cross-browser compatibility without the heft of the full jQuery library. There are about 35 jQuery methods supported in jqLite.

Final argument: A hash of attributes that the directive was declared with. If the <directive-element> was empty this argument can be empty too.

---