angularjs directives defining custom directives softuni team technical trainers software university
TRANSCRIPT
![Page 1: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/1.jpg)
AngularJS DirectivesDefining Custom Directives
SoftUni TeamTechnical TrainersSoftware Universityhttp://softuni.bg
![Page 2: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/2.jpg)
Table of Contents
1. What is Directive?
2. Uses for Directives
3. Creating Directives
4. Isolating Directive Scope
5. Handling Events with Directives
6. Using Controllers with Directives
7. Using jQuery in Directives
2
![Page 3: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/3.jpg)
What is a Directive in Angular?
![Page 4: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/4.jpg)
4
Directives == markers on a DOM element Attribute / element name / CSS class / comment E.g. ng-view, ng-model, ng-bind, ng-class, …
Extends the standard HTML behaviour Can define domain-specific tags (e.g. <order></order>) Easier to read the HTML code Cross-browser "web components" functionality
What is a Directive?
![Page 5: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/5.jpg)
5
Custom elements E.g. <div ad-box>…</div>
Custom events E.g. define onclear event
Observe and react to changes E.g. make and uppercase-only input field
Uses of Directives
![Page 6: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/6.jpg)
Defining Directives in Angular
![Page 7: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/7.jpg)
Creating Directives
app.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
templateUrl: 'templates/myDirective.html'
}
});
<input type="text" ng-model="text" />
<div>{{ text }}</div>
<div my-directive></div>
Directive
Template
HTML
'E‘: Element,'A‘: Attribute,
'C‘: Class,'M‘: Comment
Replace element with the template
![Page 8: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/8.jpg)
Defining Directives in AngularLive Demo
![Page 9: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/9.jpg)
We can only use directive once within a given scope Directives use parent scope We can create new scope (isolated scope)
Isolating Directive Scope
app.directive('adBox', function () {
return {
templateUrl: '/templates/directives/adBox.html',
scope: { ad: "=" }
}});
<div ad-box ad=ad></div>
Isolated scope: '&', '@', '='
![Page 10: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/10.jpg)
Using Controllers with Directives
app.directive('myDirective', function () {
return {
template: '<button ng-click="showAlert()">Show alert</button>',
controller: 'MyController'
}});
app.controller('MyController', function ($scope) {
$scope.showAlert = function() {
alert('Hello SoftUni Friends!');
}
});
![Page 11: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/11.jpg)
Handling Events with Directives<input type="text" validate-symbols />
app.directive('validateSymbols', function() {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
element.on('keydown', function(event) {
if(event.keyCode >= 97 && event.keyCode <= 122) {
return true;
}
return false;
})
}}});
You can type only lowercase English letters
![Page 12: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/12.jpg)
Using jQuery in Directives
<input type="text" date-picker />
app.directive('datePicker', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.datepicker();
}
}
});
Add datepicker to the current element
![Page 13: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/13.jpg)
14
How you can restrict directive to be used as element? restrict: 'E'
What are the two ways to specify the HTMLused by your directive? template and templateUrl
How would you handle an element event with directive? link function with element.on('eventName', …)
Summary
![Page 14: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/14.jpg)
Questions??
??
?
?
??
?
?
https://softuni.bg/courses/spa-applications-angularjs
AngularJS Directives
![Page 15: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/15.jpg)
License
This course (slides, examples, demos, videos, homework, etc.)is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license
16
Attribution: this work may contain portions from "SPA with AngularJS" course by Telerik Academy under CC-BY-NC-SA license
![Page 16: AngularJS Directives Defining Custom Directives SoftUni Team Technical Trainers Software University](https://reader036.vdocuments.us/reader036/viewer/2022062414/56649ea05503460f94ba3a76/html5/thumbnails/16.jpg)
Free Trainings @ Software University Software University Foundation – softuni.org Software University – High-Quality Education,
Profession and Job for Software Developers softuni.bg
Software University @ Facebook facebook.com/SoftwareUniversity
Software University @ YouTube youtube.com/SoftwareUniversity
Software University Forums – forum.softuni.bg