Creating Custom Directives in AngularJS
Introduction
AngularJS is more popular JavaScript
client-side frameworks in now a days. Angular js have many great features like
two way binding, Unit Testing, Dependency injection but one of the grate
feature of AngularJS is the ability to create directives.
What is Directives
Generally directives are mostly used for DOM
manipulation. We can create templates using directive which can contain HTML
and javascript. Directives are nothing more than markers placed
on DOM elements that use JavaScript to manipulate that DOM element and its
content.
Very simple example of directives is Customize
menu for your application, using custome directives you can write once and you
can use in many applications.
AngularJS provides many directives that can be
used to manipulate the DOM, route events to event handler functions, perform
data binding, associate controllers/scope with a view, plus much more.
Directives such as ng-click, ng-show/ng-hide, ng-repeat,and many
others found in the AngularJS core script make it easy to get started using the
framework.
Advantages Of Directives
·
Reusablity
of code in your project..... You can reuse your code at any Pages and anywhere
in your projects.
·
You
can Solve the complex operations in this easily.
·
Reduce
the amount of your code.Call it anywhere.
·
Handle
your Dom easily.
Simple Example
JavaScript Code
.directive("foo",
function() {
return {
template: "<div>the
template</div>"
};
})
Directive Properties
A short
explanation of each of the properties is shown next:
Property
|
Description
|
Restrict(
A,E,C,M)
|
Determines
where a directive can be used (as an element, attribute, CSS class, or
comment).
|
Scope (&, =,
@)
|
Used to create
a new child scope or an isolate scope.
|
template
|
Defines the
content that should be output from the directive. Can include HTML, data
binding expressions, and even other directives.
|
templateUrl
|
Provides the
path to the template that should be used by the directive. It can optionally
contain a DOM element id when templates are defined in <script> tags.
|
controller
|
Used to define
the controller that will be associated with the directive template.
|
link
|
Function used
for DOM manipulation tasks.
|
Example :
// create directive module (or retrieve existing module)
var m = angular.module("myApp");
// create the "my-dir" directive
myApp.directive("myDir", function() {
return {
restrict: "E", // directive is an Element (not Attribute)
scope: { // set up directive's isolated scope
name: "@", // name var passed by value (string, one-way)
amount: "=", // amount var passed by reference (two-way)
save: "&" // save action
},
template: // replacement HTML (can use our scope vars here)
"<div>" +
" {{name}}: <input ng-model='amount' />" +
" <button ng-click='save()'>Save</button>" +
"</div>",
replace: true, // replace original markup with template
transclude: false, // do not copy original HTML content
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});
Restrict :
E: Directive defined as an element.
A: Directive applied as an attribute on existing element.
C: Directive applied as a css class to existing element
M: Directive applied as comment.
<star-Rating
rating=”rating”></star-Rating>A: Directive applied as an attribute on existing element.
<div
star-rating rating=”rating”></div>C: Directive applied as a css class to existing element
<div
class="star-rating" rating="rating "></div>M: Directive applied as comment.
Scope
=
|
Sets
bidirectional binding between a local scope property and the parent scope
property.
|
@
|
Binds a local
scope property to the string value of the DOM attribute. This value is also
uni-directional and is passed from the parent to the isolated scope.
|
&
|
Provides a way
to execute an expression in the context of the parent scope. The value passed
to this attribute in the DOM is always expected to be a function or an
expression.
|
Happy programming!!
Don’t forget to leave your feedback and comments below!
