AngularJS Custom Directives

📌 Custom Directive क्या होता है?

AngularJS में आप अपने custom HTML tags, attributes, या elements खुद बना सकते हैं जिन्हें AngularJS Directives कहता है यानि अपना खुद का HTML Directive बनाना।

आसान भाषा में: जैसे AngularJS में ng-model, ng-repeat, ng-show होते हैं — वैसे ही आप अपना खुद का my-card, user-info, quiz-box directive बना सकते हैं।

---

🎯 Custom Directive क्यों ज़रूरी है?

फायदा	वजह
Reusability	बार-बार use होने वाला HTML एक जगह define
Clean Code	HTML छोटा, readable और maintainable होता है
Component-based UI	जैसे modern frameworks में होता है
DOM Control	आप element के behavior को control कर सकते हैं

---

✅ Directive Define करने का Basic Syntax

app.directive("directiveName", function() {
  return {
    restrict: 'E', // या 'A', 'C', 'M'
    template: "<h3>Hello Custom Directive!</h3>"
  };
});

यह एक simple directive बनाएगा जिसे <directive-name></directive-name> से call किया जाएगा।

---

✅ Example 1: Simple Element Directive

app.directive("myMessage", function() {
  return {
    restrict: 'E',
    template: "<div class='w3-panel w3-green'>Welcome to AngularJS!</div>"
  };
});

HTML में Use:

<my-message></my-message>

यह custom HTML tag की तरह काम करेगा।

---

✅ Example 2: Attribute Directive

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

HTML में Use:

<p highlight="lightblue">This text is highlighted!</p>

Attribute value के अनुसार background-color set होगा।

---

✅ restrict Options

Value	Meaning	Example
'E'	Element	<my-directive></my-directive>
'A'	Attribute	<div my-directive></div>
'C'	Class	<div class="my-directive"></div>
'M'	Comment	<!-- directive: my-directive -->

✅ आप multiple भी दे सकते हैं: restrict: 'EA'

---

✅ Example 3: Directive with scope Binding

app.directive("userCard", function() {
  return {
    restrict: "E",
    scope: {
      name: "@",    // Attribute value binding
      age: "="      // Two-way binding
    },
    template: `
      <div class="w3-card w3-padding w3-light-grey">
        <h3>{{ name }}</h3>
        <p>Age: {{ age }}</p>
      </div>
    `
  };
});

HTML में Use:

<user-card name="Amit" age="userAge"></user-card>

Parent scope से data bind होकर directive में पहुंचेगा।

---

✅ Example 4: Directive with External Template

app.directive("footerSection", function() {
  return {
    restrict: 'E',
    templateUrl: "footer.html"
  };
});

HTML में Use:

<footer-section></footer-section>

Template को अलग फाइल में रखना modular बनाता है।

---

⚙️ Bonus: Link Function vs Compile Function

Function	कब चलता है?	Use
compile()	DOM compile करते समय	DOM structure change करना
link()	Post-compile	scope/data bind करना, event attach करना

---

🧠 अभ्यास प्रश्न (Exercise)

1. Custom Directive का क्या फ़ायदा है?
2. restrict: 'A' और restrict: 'E' में क्या फर्क है?
3. नीचे दिए गए code का output क्या होगा?

app.directive("greet", function() {
  return {
    restrict: 'E',
    template: "<h1>Hello from directive!</h1>"
  };
});

<greet></greet>

---

✅ आपने क्या सीखा?

• AngularJS में custom directives क्या होते हैं
• restrict options से directive कैसे call होता है
• Element, Attribute, Class-based directives बनाना
• scope binding से dynamic data pass करना
• Reusable और modular HTML components बनाना

---

🎯 अब आप AngularJS में खुद के component-style HTML elements बना सकते हैं — बिल्कुल modern frameworks की तरह!

अगला advanced chapter होगा:
👉 “AngularJS $watch, $digest & $apply” — जिससे आप AngularJS के two-way binding का अंदरूनी सिस्टम समझ पाएँगे।

अगर आप तैयार हैं तो कहिए —
“अगला चैप्टर शुरू करो: AngularJS $watch, $digest & $apply” ✅