1 / 14

Directives

Directives. Angular Basics. Table of Contents. What is a directive and why we need it How to create directives Directive specifics for attributes jQuery plugins directives. What Is a Directive. What Is a Directive. Directives Extends HTML Make it easier for "dynamic" pages

Download Presentation

Directives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Directives Angular Basics

  2. Table of Contents • What is a directive and why we need it • How to create directives • Directive specifics for attributes • jQuery plugins directives

  3. What Is a Directive

  4. What Is a Directive • Directives • Extends HTML • Make it easier for "dynamic" pages • Easier to read document • Domain specific tags

  5. What Is a Directive • Main uses of directives • Custom elements (tags) • Custom events • Observe and react to changes

  6. Creating Directives

  7. Creating Directives • Create directives per module myApp.directive('myDirective', function () { return { restrict: 'E', // C, A, M, CA, etc. template: '<div />' // or templateUrl, scope: { // isolated scope - &, @, = }, link: function(scope, element, attr) { // put logic here, }, compile: function(element, attr) { // compile }, replace: true, priority: 0 }; });

  8. Directive Attribute Specifics

  9. Attribute Specifics • Manipulating attribute link: function (scope, element, attrs) { console.log(attrs.ngModel); attrs.$set('ngModel', 'new value'); // observe changes to interpolated attribute attrs.$observe('ngModel', function(newVal, oldVal) { console.log('ngModel has changed to ' + value); }); }

  10. jQuery Plugins Directives

  11. jQuery as Directive • jQuery plugin directives <input type="text" date-picker /> myApp.directive('datePicker', function () { return { restrict: 'A', link: function(scope, element, attr) { element.datepicker(); }, }; });

  12. What are directives Create directives Specifics Summary

  13. AngularJS http://academy.telerik.com

  14. Create a “focus” directive, which when placed on an input element, causes that element to receive the focus when a page first loads. Create a directive that allows the save button to be clicked whenever the enter key is pressed on the new artist page. Replace the artist and albums html on the artist details page with custom “artistDetails” and “albumThumbnail” directives. On the editArtist.html page, combine the artistDate input element and date-picker directive into a single date-input directive. Exercises

More Related