AngularJS Directives provide a powerful way to extend HTML and add your own custom components into Web applications. In this talk Dan Wahlin walks through the key building blocks in directives and explains how you can get started building your own custom directives using Directive Definition Objects (DDOs), isolate scope, the link() function, controllers, templates and more. This talk is based on the Building AngularJS Custom Directives video course available at https://www.udemy.com/angularjs-custom-directives.

1. Dan Wahlin

2. Dan Wahlin
Blog
http://weblogs.asp.net/dwahlin
Twitter
@DanWahlin

3. Get 60% off the video course!
http://tinyurl.com/ngDirectives60

4. http://codepen.io/danwahlin
https://github.com/DanWahlin/AngularCustomDirectives

5. Agenda
• The Role of Directives
• Peeking Under the Hood
• Shared vs. Isolate Scope
• Linking to the DOM
• Controller Love
• Directive Examples

6. Key AngularJS Directives
Application
• ng-app
• ng-controller
Forms
• ng-maxlength
• ng-minlength
• ng-pattern
• ng-required
• ng-submit
Templates
• ng-disabled
• ng-cloak
• ng-hide
• ng-if
• ng-repeat
• ng-show
• ng-switch
• ng-view
Data Binding
• ng-bind
• ng-href
• ng-init
• ng-model
• ng-src
• ng-style
Behavior
• ng-blur
• ng-change
• ng-checked
• ng-click
• ng-key*
• ng-mouse*

7. Using AngularJS Directives
• Attribute directives
<span my-dir="exp"></span>
• Element directives
<my-dir></my-dir>
• CSS class directives
<span class="my-dir: exp;"></span>
• Comment directives
<!-- directive: my-dir exp -->

8. Custom Directives
Data-Driven Directives
All about data, using
other directives and a
controller
DOM-Driven Directives
All about DOM
Manipulation
Behavior-Driven
Directives
All about events and
behaviors

9. Agenda
• The Role of Directives
• Peeking Under the Hood
• Shared vs. Isolate Scope
• Linking to the DOM
• Controller Love
• Directive Examples

10. templateUrl
scope
restrict template
controller link

11. angular.module('moduleName')
.directive('myDirective', function () {
return {
restrict: 'EA', //E = element, A = attribute, C = class, M = comment
scope: {
//@ reads the attribute string value,
//= provides two-way binding,
//& works with functions
title: '@'
},
template: '<div>{{ myVal }}</div>',
templateUrl: 'mytemplate.html',
controller: controller,
link: function ($scope, element, attrs) { } //DOM manipulation
}
});
http://docs.angularjs.org/api/ng/service/$compile

12. Agenda
• The Role of Directives
• Peeking Under the Hood
• Shared vs. Isolate Scope
• Linking to the DOM
• Controller Love
• Directive Examples

13. Shared Scope
Parent Scope
Child Scope

14. Isolate Scope

15. Parent Scope
Child Scope
Wall Blocks Parent Scope

16. Controller
$scope.customers=[];
Depends on parent scope
$scope.customers=[];
Directive
Shared
Controller
$scope.customers=[];
Isolated from parent scope
$scope.customers=[];
$scope.isolated = true;
Directive
Not Shared
Shared Scope Isolate Scope

17. Shared Scope Directive Example
var app = angular.module('myModule', []);
app.controller('Controller', ['$scope', function ($scope) {
$scope.customer = {
name: 'David',
street: '1234 Anywhere St.'
};
}]);
app.directive('sharedScope', function () {
return {
template: 'Name: {{customer.name}} Street: {{customer.street}}'
};
});
Scope is inherited
<div shared-scope></div>

18. Isolating Scope in Directives
angular.module('myModule')
.directive('isolateScope', function () {
return {
scope: {}, //isolate scope
template: 'Name: {{customer.name}} Street: ' +
'{{customer.street}}'
};
});
<div isolate-scope></div>
No data will display!

19. Hi, I'm Dan
String with one-way binding
@
$scope.first='James';
Directive can access a string value
scope: { name: '@' }
Directive
@ isolate scope property
<my-directive name="{{first}}" />

20. Hi, I'm Dan
No, you're Jim
Bi-directional Binding
=
$scope.person={name:'Dan'};
Two-way binding created
scope: { customer: '=' }
Directive
= isolate scope property
<my-directive customer="person" />

21. Call me back at: 123-1234
Calling 123-1234
Function Callback
&
$scope.click=function() { };
Can invoke external function
scope: { action: '&' }
Directive
& isolate scope property
<my-directive action="click()" />

22. @ Bind a local scope property to the value of a DOM attribute. The result
is always a string.
scope: { name: '@' }  <my-directive name="{{name}}" />
= Creates a bi-directional binding between a local scope property and the
parent scope property.
scope: { customer: '=' }  <my-directive
customer="person" />
& Execute an expression/function in the context of the parent scope.
scope: { click: '&' }  <my-directive click="click()" />

23. Agenda
• The Role of Directives
• Peeking Under the Hood
• Shared vs. Isolate Scope
• Linking to the DOM
• Controller Love
• Examples

24. angular.module('directivesModule')
.directive('domDirective', function () {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
element.bind('click', function () {
element.html('You clicked me!');
});
element.bind('mouseenter', function () {
element.css('background-color', 'yellow');
});
element.bind('mouseleave', function () {
element.css('background-color', 'white');
});
}
};
});
<div dom-directive>Click Me!</div>

25. Agenda
• The Role of Directives
• Peeking Under the Hood
• Shared vs. Isolate Scope
• Linking to the DOM
• Controller Love
• Directive Examples

26. angular.module('directivesModule')
.directive('isolateScopeWithController', function () {
return {
restrict: 'EA',
scope: {datasource: '=', add: '&'},
controller: function ($scope) {
function init() {
$scope.customers = angular.copy($scope.datasource);
}
init();
$scope.addCustomer = function () {
//Call external scope's function
$scope.add();
//Add new customer to directive scope
$scope.customers.push({ … });
};
},
template: '<button ng-click="addCustomer()">Change Data</button><ul>' +
'<li ng-repeat="cust in customers">{{ cust.name }}</li></ul>'
};
}); <div isolate-scope-with-controller></div>

27. Transclusion
Inclusion of a document or part of a document
into another document by reference
http://en.wikipedia.org/wiki/Transclusion

28. <html>
<body>
</body>
</html>
<div>
Hello!
</div>

29. myDirective
<div class="container">
Content provided by consumer of
directive
</div>

30. myDirective
<div class="container" ng-transclude>
Content provided by consumer
of directive
</div>
<html>
<body>
<my-directive>
</my-directive>
</body>
</html>
<div>
Hello!
</div>
<div class="container">
<div>
Hello
</div>
</div>

31. Agenda
• The Role of Directives
• Peeking Under the Hood
• Shared vs. Isolate Scope
• Linking to the DOM
• Controller Love
• Directive Examples

32. https://github.com/DanWahlin/CustomerManagerStandard

33. Find more ngularJS content at:
Blog
http://weblogs.asp.net/dwahlin
Twitter
@DanWahlin

34. If you read this far you deserve a bigger discount!
Get 60% 70% off the video course!
http://tinyurl.com/ngDirectives70