Download - Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | FalafelCON 2014
Building Custom AngularJS Direc6ves
Dan Wahlin
Dan Wahlin
Blog h;p://weblogs.asp.net/dwahlin Twi;er
@DanWahlin
D
1
@ = &
Transclusion
Agenda • The Role of Direc6ves • Peeking Under the Hood • Shared vs. Isolate Scope • Linking to the DOM • Controller Love • Direc6ve Examples
Key AngularJS Direc6ves
Applica'on
• ng-‐app • ng-‐controller
Forms
• ng-‐maxlength • ng-‐minlength • ng-‐paKern • 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*
Using AngularJS Direc6ves • AKribute direc6ves
<span my-‐dir="exp"></span>
• Element direc6ves
<my-‐dir></my-‐dir>
• CSS class direc6ves
<span class="my-‐dir: exp;"></span>
• Comment direc6ves
<!-‐-‐ directive: my-‐dir exp -‐-‐>
Custom Direc6ves
Data-‐Driven Direc'ves
All about data, using other direc'ves and a controller
DOM-‐Driven Direc'ves
All about DOM Manipula'on
Agenda • The Role of Direc6ves • Peeking Under the Hood • Shared vs. Isolate Scope • Linking to the DOM • Controller Love • Direc6ve Examples
templateUrl
scope
restrict template
controller link
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
}
});
hKp://docs.angularjs.org/api/ng/service/$compile
Agenda • The Role of Direc6ves • Peeking Under the Hood • Shared vs. Isolate Scope • Linking to the DOM • Controller Love • Direc6ve Examples
Shared Scope
Parent Scope
Child Scope
Isolate Scope
Parent Scope
Child Scope
Wall Blocks Parent Scope
Controller
$scope.customers=[];
Depends on parent scope
$scope.customers=[];
Direc've
Shared
Controller
$scope.customers=[];
Isolated from parent scope
$scope.customers=[]; $scope.isolated = true;
Direc've
Not Shared
Shared Scope Isolate Scope
hKp://codepen.io/danwahlin
Shared Scope Direc6ve 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>
Isola6ng Scope in Direc6ves 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!
Hi, I'm Dan
String with one-‐way binding
@
$scope.first='James';
Direc6ve can access a string value
scope: { name: '@' }
Direc've
@ isolate scope property
<my-‐directive name="{{first}}" />
Hi, I'm Dan
No, you're Jim
Bi-‐direc6onal Binding
=
$scope.person={name:'Dan'};
Two-‐way binding created
scope: { customer: '=' }
Direc've
= isolate scope property
<my-‐directive customer="person" />
Call me back at: 123-‐1234
Calling 123-‐1234
Func6on Callback
&
$scope.click=func6on() { };
Can invoke external func6on
scope: { ac6on: '&' }
Direc've
& isolate scope property
<my-‐directive action="click()" />
@ Bind a local scope property to the value of a DOM aKribute. The result
is always a string.
scope: { name: '@' } à <my-‐directive name="{{name}}" />
= Creates a bi-‐direc6onal binding between a local scope property and the parent scope property.
scope: { customer: '=' } à <my-‐directive customer="person" />
& Execute an expression/func6on in the context of the parent scope. scope: { click: '&' } à <my-‐directive click="click()" />
Agenda • The Role of Direc6ves • Peeking Under the Hood • Shared vs. Isolate Scope • Linking to the DOM • Controller Love • Examples
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>
Agenda • The Role of Direc6ves • Peeking Under the Hood • Shared vs. Isolate Scope • Linking to the DOM • Controller Love • Direc6ve Examples
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>
Transclusion Inclusion of a document or part of a document into another document by reference
hKp://en.wikipedia.org/wiki/Transclusion
<html> <body> </body> </html>
<div> Hello! </div>
myDirec've
<div class="container"> Content provided by consumer of direc6ve </div>
myDirec've
<div class="container" ng-‐transclude> Content provided by consumer of direc6ve </div>
<html> <body> <my-‐direc6ve> </my-‐direc6ve> </body> </html>
<div> Hello! </div>
<div class="container"> <div> Hello </div> </div>
Agenda • The Role of Direc6ves • Peeking Under the Hood • Shared vs. Isolate Scope • Linking to the DOM • Controller Love • Direc've Examples
hKps://github.com/DanWahlin/CustomerManagerStandard
Find more ngularJS content at:
Blog h;p://weblogs.asp.net/dwahlin Twi;er
@DanWahlin
