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

P

Basic Behaviors

P

Write Your First Directive

P

Directive Restrictions

P

Directive to Directive Communication in AngularJS

P

Directives Talking to Controllers

P

Build Your Own ng-controller Directive

P

Hijacking Existing HTML Attributes with Angular Directives

P

Using Services in Angular Directives

P

Create a D3 Chart as an Angular Directive

P
angularjs tutorial about First Directive

First Directive

2:08 angularjs PRO

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.

angularjs tutorial about Basic Behaviors

Basic Behaviors

3:29 angularjs PRO

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 PRO

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.

angularjs tutorial about Directive Restrictions

Directive Restrictions

3:01 angularjs PRO

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 PRO

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 PRO

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 PRO

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 PRO

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?