Directive Basics to Complex

How to create a directive with an examples

Watch User Created Playlist (10)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

First Directive

Basic Behaviors

Write Your First Directive

Directive Restrictions

Directive to Directive Communication in AngularJS

Directives Talking to Controllers

Build Your Own ng-controller Directive

P

Hijacking Existing HTML Attributes with Angular Directives

Using Services in Angular Directives

Create a D3 Chart as an Angular Directive

P

First Directive

2:08 angularjs

Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.

Basic Behaviors

3:29 angularjs

Bring your directives to life with custom behaviours. This is the recommended way of interacting with the DOM in AngularJS. If you find yourself modifying the DOM inside of your controllers (bad), directive behaviours are your solution (awesome).

angularjs tutorial about Write Your First Directive

Write Your First Directive

2:46 angularjs

Write your very first directive! This lesson will show you how to declare a directive, and start using the "link" function to modify the behavior of an HTML element.

Directive Restrictions

3:01 angularjs

By default AngularJS directives can be used with elements, attributes, classes, and comments. Many times we want to restrict it to one or more of those to control how a directive will be used. This lesson digs into how and why to use Directive restrictions.

Directive to Directive Communication in AngularJS

8:01 angularjs

In Angular JS, you can use one directive as an element and other directives as attributes to the element, allowing you to specify different functionality for elements based on the attributes in the element. This lesson shows you how to take a group of directive elements and give them each unique functionality based on their directive attributes.

Directives Talking to Controllers

4:43 angularjs

Often in AngularJS we want to share information between controllers and directives. One way to do this is by passing the scope, but this makes the directive reliant on the scope having the methods you want to run. This lesson shows you a cleaner way that you can pass methods to the directive using an attribute and decouple controllers from directives. This in turn makes your directives more generic/reusable.

Build Your Own ng-controller Directive

2:20 angularjs PRO

Have you ever wanted to write your own ng-controller directive? No?! That probably means you're sane. That said, it is an interesting study to lift the lid on the black box, and understand how your tools work on a more intimate level.

angularjs tutorial about Hijacking Existing HTML Attributes with Angular Directives

Hijacking Existing HTML Attributes with Angular Directives

3:55 angularjs

Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique in our own applications. We will build a directive that adds additional functionality to the src property of an <img>

angularjs tutorial about Using Services in Angular Directives

Using Services in Angular Directives

5:19 angularjs

Directives have dependencies too, and you can use dependency injection to provide services for your directives to use.

angularjs tutorial about Create a D3 Chart as an Angular Directive

Create a D3 Chart as an Angular Directive

8:55 angularjs PRO

Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?