Course Progress 70%

AngularJS Custom Directives

← AngularJS Dependency Injection AngularJS Built-in Directives →

AngularJS Custom Directives का उपयोग HTML को extend करने और reusable UI components बनाने के लिए किया जाता है। जब built-in directives (ng-model, ng-repeat, ng-show आदि) आपकी requirement पूरी नहीं करतीं, तब custom directives बनाई जाती हैं।

Custom directives की मदद से:

  • Reusable components बनते हैं
  • HTML clean और readable रहती है
  • Complex UI logic encapsulate किया जा सकता है

Directive क्या होती है

Directive एक special marker होती है जो AngularJS को बताती है कि DOM element के साथ क्या behavior attach करना है।

AngularJS directives:

  • New HTML behavior define करती हैं
  • DOM को manipulate कर सकती हैं
  • Data binding और events handle कर सकती हैं

Custom Directive क्यों बनानी चाहिए

  • Same UI बार-बार use करना हो
  • Complex DOM logic को reuse करना हो
  • HTML semantic और readable बनानी हो
  • Application maintainable बनानी हो

Custom Directive बनाने का Basic Syntax

app.directive("myDirective", function() {
  return {
    restrict: "E",
    template: "<p>This is a custom directive</p>"
  };
});

Code Explanation

  • app.directive() directive register करता है
  • "myDirective" directive का नाम है
  • restrict: "E" बताता है कि directive element की तरह use होगी
  • template HTML content define करता है

Custom Directive का Use

<my-directive></my-directive>

Explanation

  • Directive नाम camelCase में define होता है
  • HTML में kebab-case में use किया जाता है
  • AngularJS automatically map कर देता है

restrict Option

restrict यह तय करता है कि directive कैसे use होगी।

Values:

  • E – Element
  • A – Attribute
  • C – Class
  • M – Comment
restrict: "EA"

Explanation

  • EA मतलब Element और Attribute दोनों रूप में usable

Attribute Directive Example

app.directive("highlight", function() {
  return {
    restrict: "A",
    link: function(scope, element) {
      element.css("background", "yellow");
    }
  };
});

<p highlight>This is highlighted text</p>

Code Explanation

  • restrict: "A" attribute usage allow करता है
  • link function DOM access देता है
  • Element style dynamically change होती है

Class Directive Example

<p class="red-text">Hello</p>

app.directive("redText", function() {
  return {
    restrict: "C",
    link: function(scope, element) {
      element.css("color", "red");
    }
  };
});

Code Explanation

  • Class name directive से match होती है
  • Styling logic directive में जाती है

Template vs TemplateUrl

template

template: "<h3>Hello Directive</h3>"

templateUrl

templateUrl: "myTemplate.html"

Explanation

  • template small HTML के लिए
  • templateUrl large और reusable templates के लिए

Scope in Custom Directives

Directive के लिए scope तीन प्रकार की होती है।

Shared Scope (Default)

scope: false
  • Parent scope share होती है

New Child Scope

scope: true
  • Child scope create होती है
  • Parent data accessible रहता है

Isolated Scope

scope: {
  title: "@",
  count: "=",
  action: "&"
}

Explanation

  • @ string binding
  • = two-way binding
  • & function binding

Isolated Scope Example

<user-card name="Rahul" age="25"></user-card>

app.directive("userCard", function() {
  return {
    restrict: "E",
    scope: {
      name: "@",
      age: "@"
    },
    template: "<p>{{name}} - {{age}}</p>"
  };
});

Code Explanation

  • Directive external data accept करती है
  • Isolated scope component-like behavior देता है

link Function

link function directive का main behavior define करता है।

link: function(scope, element, attrs) {
}

Explanation

  • scope data access देता है
  • element DOM element होता है
  • attrs directive attributes access करता है

compile Function

compile function advanced use cases के लिए होता है।

compile: function(element, attrs) {
  return function(scope, element) {
  };
}

Explanation

  • DOM compile होने से पहले execute होता है
  • Performance optimization के लिए useful

Controller in Directive

Directive का अपना controller भी हो सकता है।

controller: function($scope) {
  $scope.text = "Directive Controller";
}

Explanation

  • Directive internal logic manage करता है
  • Parent controller से separate रहता है

Transclusion

Transclusion directive के अंदर external content insert करने देता है।

transclude: true,
template: "<div ng-transclude></div>"

Explanation

  • Parent HTML directive के अंदर show होती है
  • Wrapper components के लिए useful

Custom Directive Best Practices

  • Small और focused directives बनाएं
  • DOM manipulation minimum रखें
  • Business logic services में रखें
  • Isolated scope prefer करें

Common Custom Directive Mistakes

  • Heavy logic directive में लिखना
  • Scope isolation ignore करना
  • Wrong restrict usage
  • Naming conventions follow न करना

Summary

इस chapter में आपने सीखा:

  • Custom directives क्या होती हैं
  • Directive create और use करना
  • restrict options
  • Template और scope types
  • link और compile functions
  • Best practices और common mistakes
← AngularJS Dependency Injection AngularJS Built-in Directives →
  • Home