AngularJS లో కస్టమ్ ఆదేశాలు: ఎలా సృష్టించాలి? [ఉదాహరణలు]

నన్ను క్లిక్ చేయండి var యాప్ = angular.module ('DemoApp', []); app.directive ('ngGuru', ఫంక్షన్ () {రిటర్న్ {లింక్: ఫంక్షన్ ($ స్కోప్, ఎలిమెంట్, అటర్స్) {మూలకం. బైండ్ ('క్లిక్', ఫంక్షన్ () {మూలకం. html ('మీరు నన్ను క్లిక్ చేసారు') );}}});

కోడ్ వివరణ:

  1. HTML DOM లో ఈవెంట్‌లను యాక్సెస్ చేయడానికి ఆదేశాల సామర్థ్యాన్ని ఇవ్వడానికి మేము కోణీయంగా నిర్వచించిన లింక్ ఫంక్షన్‌ను ఉపయోగిస్తున్నాము.
  2. మేము ఒక HTML DOM మూలకం కోసం ఒక ఈవెంట్‌కు ప్రతిస్పందించాలనుకుంటున్నందున మేము 'మూలకం' కీవర్డ్‌ని ఉపయోగిస్తున్నాము, ఇది మా విషయంలో 'div' మూలకం అవుతుంది. మేము 'బైండ్' ఫంక్షన్‌ను ఉపయోగిస్తున్నాము మరియు మూలకం యొక్క క్లిక్ ఈవెంట్‌కు అనుకూల కార్యాచరణను జోడించాలనుకుంటున్నాము. 'క్లిక్' పదం కీవర్డ్, ఇది ఏదైనా HTML నియంత్రణ యొక్క క్లిక్ ఈవెంట్‌ను సూచించడానికి ఉపయోగించబడుతుంది. ఉదాహరణకు, HTML బటన్ నియంత్రణలో క్లిక్ ఈవెంట్ ఉంది. మా ఉదాహరణలో, మా 'dev' ట్యాగ్ యొక్క క్లిక్ ఈవెంట్‌కి మేము అనుకూల కోడ్‌ను జోడించాలనుకుంటున్నాము, మేము 'క్లిక్' కీవర్డ్‌ని ఉపయోగిస్తాము.
  3. ఇక్కడ మేము మూలకం యొక్క అంతర్గత HTML (మా విషయంలో డివి మూలకం) 'మీరు నన్ను క్లిక్ చేసారు!' అనే టెక్స్ట్‌తో భర్తీ చేయాలనుకుంటున్నాము.
  4. Ng-guru కస్టమ్ డైరెక్టివ్‌ను ఉపయోగించడానికి ఇక్కడ మేము మా div ట్యాగ్‌ను నిర్వచించాము.

కోడ్ విజయవంతంగా అమలు చేయబడితే, మీరు బ్రౌజర్‌లో మీ కోడ్‌ని అమలు చేసినప్పుడు కింది అవుట్‌పుట్ చూపబడుతుంది.

అవుట్‌పుట్:

  • ప్రారంభంలో 'క్లిక్ మి' టెక్స్ట్ వినియోగదారుకు చూపబడుతుంది ఎందుకంటే ఇది మొదట్లో డివి ట్యాగ్‌లో నిర్వచించబడింది. మీరు నిజంగా div ట్యాగ్‌పై క్లిక్ చేసినప్పుడు, దిగువ అవుట్‌పుట్ చూపబడుతుంది

సారాంశం

  • ప్రధాన కోణీయ అప్లికేషన్‌లో కోడ్‌ను ఇంజెక్ట్ చేయడానికి ఉపయోగించే అనుకూల ఆదేశాన్ని కూడా ఒకరు సృష్టించవచ్చు.
  • 'కంట్రోలర్', 'కంట్రోలర్ఏస్' మరియు 'టెంప్లేట్' కీవర్డ్‌లను ఉపయోగించడం ద్వారా నిర్దిష్ట కంట్రోలర్‌లోని స్కోప్ ఆబ్జెక్ట్‌లో నిర్వచించిన సభ్యులకు కాల్ చేయడానికి అనుకూల ఆదేశాలు చేయవచ్చు.
  • అప్లికేషన్ యొక్క అవసరాన్ని బట్టి అవసరమైన ఎంబెడెడ్ కార్యాచరణను అందించడానికి ఆదేశాలు కూడా గూడు కట్టుకోవచ్చు.
  • వివిధ వెబ్ అప్లికేషన్‌లలో అవసరమయ్యే సాధారణ కోడ్‌ను ఇంజెక్ట్ చేయడానికి వాటిని ఉపయోగించే విధంగా ఆదేశాలను కూడా తిరిగి ఉపయోగించుకోవచ్చు.
  • కస్టమ్ HTML ట్యాగ్‌లను సృష్టించడానికి ఆదేశాలు కూడా ఉపయోగించబడతాయి, ఇది వ్యాపార అవసరానికి అనుగుణంగా నిర్వచించబడిన వారి స్వంత కార్యాచరణను కలిగి ఉంటుంది.
  • బటన్ మరియు మౌస్ క్లిక్‌ల వంటి DOM ఈవెంట్‌లను నిర్వహించడానికి ఆదేశాలలోని ఈవెంట్‌లను కూడా నిర్వహించవచ్చు.