Custom AngularJS Directives

Creating
ANGULAR JS
Custom Directives
The coolest feature you’ve ever used.
Let’s find out what it is!

Declarative &
Model-Driven
Behavior
Imperativeness equals your problem.
Declarative approach means colliding with
somebody else’s problem. Also extending HTML.
core concept #1

Modularity &
Reusability
across contexts
Directives know their own element and local scope.
We can pass additional data into directives as
attributes, right on element.
Write once, run anywhere!
core concept #2

Keep it Local
Sticks to a self-contained, modular scope, which
understands its context: inside the directive,
‘element’ is like ‘this’.
Uses messages, models to affect things elsewhere.
Easier to maintain, easier to read, easier to scale.
core concept #3

We know Angular Built-In Directives
 ng-app
 ng-bind
 ng-model
 ng-class
 ng-controller
 ng-show / ng-hide
 ng-if
 ng-switch
Generally speaking, a directive is a function that’s
attached to an element. But not JUST. It is a whole
execution environment.
Basic Angular JS directives you
are usually using
How are custom directives
different from built-in?
They are different only in naming conventions. Do
not use ‘ng-’ in your custom directives.

Naming Custom Directives
Angular uses a convention borrowed from other JS
projects: names in HTML are hyphenated (snake
case) while identifiers in the JS are camel-cased.
Expect Angular to do this conversion automatically
because of normalization process.
Directive name in HTML and
Normalization
.directive(‘customDir’) function () {
// Some code goes here
})
<custom-dir></custom-dir>
<span custom:dir></span>
<span custom_dir></span>
…

Let’s
CREATE
Custom Directive
Directive is the heart of Angular JS Framework

Building Custom Directive
Custom Directive Creating
Process
angular
.module(‘moduleName’, [‘dep1’, ‘dep2’])
.directive(‘directiveName’) factoryFunction () {
// Some code goes here
})  .directive() is a method we call on an
angular.module(), either at creation time or via
reference, passing a name and a factory function
 The factory will return either a function or an
object containing a function and other settings
When we talk about generic ‘factories’, we don’t mean $factory, which is an Angular
implementation service. The factory pattern is all about Functional Programming: using
basic JavaScript functions to build and return naiive objects or other functions.

What do we do with the factory function?
There are two basic options
 Returning only the link function
 Link versus Compile
 Pre-Link versus Post-Link
How to choose? Link or configuration object? What is Pre-Link and Post-Link functions?
All these relate to $compile service of Angular JS and recommended for high-skilled
developers.
 Return a configuration object
 Return a ‘linking function
But now IGNORE for today:

Using Config Object
Today we need to remember that directive returns
an object. We may use the list of properties.
Remember, link property is optional.
Returning object with directives’
configurations
angular.module(‘moduleName’, [])
return {
link: function (scope, element, attrs) {
element.bind(‘mouseenter’, function () {
});
},
restrict: ‘ECMA’,
template: ‘<div>Hello, World</div>’
};
});

Link Function Arguments
Directives that want to modify the DOM typically use the
link option to register DOM listeners as well as update the
DOM.
 scope - is an Angular scope object.
 element - is the jqLite-wrapped element that this
directive matches (declared on ‘this’).
 attrs - object containing the HTML attributes defined
on the element, including the directive invocating itself.
 controller - is the directive's required controller
instance(s) or it's own controller (optional).
 transcludeFn is a transclude linking function pre-bound
to the correct transclusion scope (optional).
Creating a Directive that
Manipulates the DOM
return {
});
},
};
});

Link Function Arguments
$scope is assignable, but should be reserved for
angular functions to pass into a controller, other
context. It is a shorthand, by which we’re calling the
$scopeProvider, which is Dependency-Injecting the
scope for us.
scope is just our own, customizable reference for
directive’s local scope.
$scope VERSUS scopeangular.module(‘moduleName’, [])
return {
});
},
};
});

Using jqLite
Angular will defer to jQuery, if present, but provides
its own subset of jQuery for basic DOM tasks. You
can not just use ‘$( )’, nor find using selectors,
unfortunately.
But all built-in ‘element’ refs are already pre-
wrapped in jqLite object. Try to chain methods as
you normally would.
You can use Angular jqLite for
basic DOM tasks
 addClass()
 after()
 append()
 attr()
 bind()
 children()
 clone()
 contents()
 css()
 data()
 eq()
 find()
 hasClass()
 html()
 nest()
 on()
 off()
 parent()
 prepend()
 prop()
 ready()
 remove()
 removeAttr()
 removeClass()
 removeData()
 replaceWith()
 text()
 toggleClass()
 triggerHandler()
 unbind()
 val()
 wrap()

Using jqLite
$(‘selector’).bind(‘mouseenter’, function () {});
The same as..
return {
do some stuff..
});
},
};
});
Let’s review another ‘modern’
directives’ options…

Templating in Directive
template – property where we can store our
template as a string.
templateUrl – this property allows us to load
template from a file, using path.
Use the template you need
return {
});
},
template: ‘<div>Hello, World</div>’,
// or
templateUrl: ‘path/dir/template.html’
};
});

Restrict Property
Remember that directives are re-usable. We can restrict
the usage of a directive to (a) specific context(s).
Defaults to ‘A’. Stack as a single string ‘EACM’.
 ‘E’lement,
 ‘A’ttribute,
 ‘C’lass,
 co’M’ment.
Memorize like ECMAScript
<custom></custom>
<span custom=“somevalue”></span>
<span class=“custom_dir”></span>
<!– directive: custom somevalue -->
return {
};
});

Replace Property [DEPRECATED]
By default, a directive element will wrap the
contents of a template. The ‘element’ object will be
the outer directive element. To instead replace the
directive element (and object) with the contents of
the template, use replace: true
This is especially critical when declaring as an
element.
Wrap without showing directive
element
return {
replace: true,
template: ‘<header>Some info</header>’
};
});
<body>
<custom-dir>
<header>
Some info
</header>
</custom-dir>
</body>

Directive Isolate Scope
We have the option, in directives, of using either: the
local $scope (from our own controller, possibly) and a
new, per-instance, ‘isolate scope’.
Isolate scopes still have a parent $scope, but they’re
‘eccapsulated’ or, in other words, detached from the
inheritance chain. This is especially useful with repeats,
so variables can be fully local to the instance
Using isolate scope in a custom
directive
return {
scope: true, // creates child scope
};
});
return {
scope: {
dataSet: ‘@’,
}, // creates isolated scope
};
});

Isolate Scope Data-Binding
Angular provides us with ways to bind the value of properties in
isolate scope to attributes on the element, using special operators.
By default, an operator alone will be assumed to refer to a same-
named attr.
‘@’ - binds the local scope property to primitive value of the DOM
attribute. Result is always a string because attributes are strings.
‘=‘ - binds the local scope property to a parent scope property
having same name as the value of the DOM attribute.
‘&’ - binds local scope property to the output of an expression
defined in the DOM attribute. It’s like a function wrapper.
Ways to bind values of properties
return {
scope: {
job: ‘@job’, // or only ‘@’
},
};
});
<custom job=“dev”></custom>
scope: {
job: ‘@’,
}
// the same as
scope.job = attrs.job;

You also
NEED TO KNOW
Something MORE
You should re-view some information about custom
directives by yourself

Try to find…
 Transclude
 Controller
 controllerAs
 Require
…more about such properties
You will need this information in the future to create
more complex custom directives, using them as the
LEGO blocks.

References
…Learn more
Angular Directives from Scratch
Creating Custom Directives
Comprehensive Directive API

Thank You!
This presentation was created specially for
if058.Web-UI Group.
Yaroslav Prodanchuk
prepared by:

Custom AngularJS Directives

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to Custom AngularJS Directives (20)

Recently uploaded (20)

Custom AngularJS Directives