AngularJS Directives

Example

• Directives

Build in

• data-ng-init to initialize array
• data-ng-repeat and orderBy
• data-ng-repeat to loop through two dimensional array
• data-ng-switch on with condition
• data-ng-switch-when to add line break
• data-ng-switch to control if to display
• ng-attr-title to add tooltip to element
• ng-change to call function in scope
• ng-change to change scope value
• ng-checked to bind a scope value
• ng-class to bind class
• ng-class to toggle class with model value
• ng-class-even for even
• ng-class-odd for odd
• ng-click counter
• ng-click to call a function in scope
• ng-click to call function
• ng-click to negate value
• ng:controller to call function
• ng-disabled to Enable/Disable DOM Elements Conditionally
• ng-hide to show and hide
• ng-if with boolean constant
• ng-if with hardcoded value
• ng-init and ng-repeat with objects
• ng-init to create Date type
• ng-init to create object
• ng-repeat to loop through array from scope
• ng-repeat to create table cells
• ng-repeat with hardcoded array
• ng-repeat-start to bind data for definition list
• ng-repeat to iterate
• ng-show to control Show hide with model
• ng-show with boolean constant
• ng-src to load image
• ng-src to set image source
• ng-true-value to mark true value
• ng-false-value to set false value for checkbox
• ng-hide, ng-show and ng-click to create tab control
• ng-options with object
• ng-pattern to validate
• ng-repeat to output loop index
• ng-repeat and check loop index
• ng:repeat, ng:class, ng:class-odd vs Static construct
• ng-repeat-start and ng-repeat-end
• ng-repeat to create form input element
• ng-repeat with key and value pair
• ng-submit to call custom function
• ng-true-value to set true value for checkbox

Custom Directives

• Render a Directive ' s DOM Node Children
• Mix buildin directive to create new directive
• Pass Data into a Directive
• Change the DOM in Response to User Actions with custom directive
• Directive to replace itself
• Custom directive with attribute
• Repeatedly Rendering Directive ' s DOM Node Children
• Custom directive with namespace
• Pass attribute value to a directives
• Directive-to-Directive Communication
• Create custom tag with directive
• Bind value to custom directive
• Use loop in directive replacement
• Pass expression to a custom directives
• Create Custom HTML Elements with Directives