Angular Directives

Learn everything there is to know about directives!

Watch User Created Playlist (32)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Write Your First Directive

Directive Definition Object (DDO)

Understanding Isolate Scope

Isolate Scope "@"

Isolate Scope "="

Isolate Scope "&"

Isolate Scope Review

P

Directive Restrictions

Directives Talking to Controllers

Directive Communication

Useful Behaviors

Directive to Directive Communication in AngularJS

Using Services in Angular Directives

Directive for Route Handling

Consistency between ui-router states and Angular directives

P

Directive with Transcluded Elements

P

Compile Pre and Post Link

P

Build a Debug Directive

Using ngModel in Custom Directives

Using the ngChange Directive in Angular

Hijacking Existing HTML Attributes with Angular Directives

Search Directive with Rails

P

Building Zippy

CodeSchool Refactor - Reusable Directives Part 1/2

CodeSchool Refactor - Flexible Directives Part 2/2

Angular with Webpack - Requiring Directives

P

Create a D3 Chart as an Angular Directive

P

Build Your Own ng-controller Directive

P

Unit Testing a Directive

Unit Testing Directive Scope

Unit Testing Directive Scope Binding

P

Convert a UI Route into an Angular Directive

P
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.

angularjs tutorial about Directive Definition Object (DDO)

Directive Definition Object (DDO)

1:19 angularjs

Directive Definition Objects are used to configure AngularJS directives. Be sure to check out our Directive Definition Object Cheat Sheet.

angularjs tutorial about Understanding Isolate Scope

Understanding Isolate Scope

6:38 angularjs

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Isolate Scope "@"

4:51 angularjs

AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or "@" designator in your isolate scopes.

Isolate Scope "="

2:51 angularjs

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

angularjs tutorial about Isolate Scope "&"

Isolate Scope "&"

6:03 angularjs

The "&" in your isolated scopes within your AngularJS application will allow you to invoke a method within the scope that your directive lives in.

Isolate Scope Review

3:30 angularjs PRO

A review of the three types of isolate scope binding methods in AngularJS. The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope.

angularjs tutorial about Directive Restrictions

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.

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.

angularjs tutorial about Directive Communication

Directive Communication

4:28 angularjs

In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers.

Useful Behaviors

2:55 angularjs

When you define a directive you get access to the attrs object by declaring it as a dependency in the link function. The attrs object will contain the normalized attributes and their corresponding values declared on the element which contains the directive in the html. So if you set a value on your directive attribute (myDirective="value"), you can access this value in your directive configuration by accessing attrs.myDirective, as this contains the value set in the html for myDirective.

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.

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.

Directive for Route Handling

3:02 angularjs

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

angularjs tutorial about Consistency between ui-router states and Angular directives

Consistency between ui-router states and Angular directives

4:40 angularjs PRO

ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app grows larger over time.

angularjs tutorial about Directive with Transcluded Elements

Directive with Transcluded Elements

4:46 angularjs PRO

Create a wrapWith directive using advanced transclusion techniques.

angularjs tutorial about Compile Pre and Post Link

Compile Pre and Post Link

1:53 angularjs PRO

The typical function you use when creating a directive is the post link function with the signature function (scope, element, attributes) {}. You can also make use of the pre link function for finer grained control of the initialization of your directive.

Build a Debug Directive

4:00 angularjs

Explore some interesting techniques with AngularJS directives to create a debug directive using termination, priority, and the $compile service.

angularjs tutorial about Using ngModel in Custom Directives

Using ngModel in Custom Directives

1:42 angularjs

You can use ngModel in your own directives, but there are a few things you'll need to do to get it working properly.

angularjs tutorial about Using the ngChange Directive in Angular

Using the ngChange Directive in Angular

2:25 angularjs

The ngChange directive will allow you to monitor value changes on input elements in your AngularJS applications

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 Search Directive with Rails

Search Directive with Rails

7:35 angularjs PRO

Create a search directive with AngularJS and Rails. You'll want to take a look at the related Rails TODO API Part 1 and Rails TODO API Part 2. This is not a Rails how-to, so some knowledge there is expected to get up and running.

angularjs tutorial about Building Zippy

Building Zippy

7:55 angularjs

Building a demo AngularJS directive named Zippy using ng-model, ng-click and transclusion (no controller)

angularjs tutorial about CodeSchool Refactor - Reusable Directives Part 1/2

CodeSchool Refactor - Reusable Directives Part 1/2

5:47 angularjs

In collaboration with CodeSchool, John refactors pieces of the CodeSchool Angular app into a more reusable directives.

angularjs tutorial about CodeSchool Refactor - Flexible Directives Part 2/2

CodeSchool Refactor - Flexible Directives Part 2/2

14:25 angularjs

In collaboration with CodeSchool, John takes the reusable directives from the previous video and works them into more flexible and easy to use directives.

angularjs tutorial about Angular with Webpack - Requiring Directives

Angular with Webpack - Requiring Directives

3:48 angularjs PRO

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

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.

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.

Unit Testing a Directive

2:14 angularjs

In this lesson you will unit test a simple AngularJS directive

angularjs tutorial about Unit Testing Directive Scope

Unit Testing Directive Scope

1:57 angularjs

Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes.

angularjs tutorial about Unit Testing Directive Scope Binding

Unit Testing Directive Scope Binding

2:00 angularjs PRO

Digging a little deeper into unit testing an AngularJS directive, this lesson looks at testing binding across multiple scopes.

angularjs tutorial about Convert a UI Route into an Angular Directive

Convert a UI Route into an Angular Directive

2:49 angularjs PRO

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

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