दिलचस्प पोस्ट
मैं विधि के बजाय मेरी कक्षा के शीर्ष पर मेरी चर सेट करना चाहूंगा एक डेटा फ्रेम के एक कॉलम को कई कॉलम में विभाजित करें इनलाइन शैलियों के साथ सीएसएस छद्म वर्ग केवल सीएसएस का उपयोग कर लिंक को निष्क्रिय कैसे करें? सुपर () जावा में जावा में फ़ाइल संचालन को स्थानांतरित / कॉपी करें क्लाइंट जोड़ने के बाद jQuery का क्लिक ईवेंट काम नहीं करता PHP के साथ HTTP कैश हेडर का उपयोग कैसे करें git difftool, सभी diff फ़ाइलों को तुरंत खोलें, धारावाहिक में नहीं वर्तमान आईफोन / डिवाइस मॉडल का निर्धारण कैसे करें? एक नियमित सरणी का तत्व निकालें स्विंग: जेफ्रैम की छवि प्राप्त करें HTMLCollection, नोड सूची, और ऑब्जेक्ट्स के बीच अंतर एएसपी.नेट एमवीसी में प्रत्येक डीबीसीटीन्टेक्ट अनुरोध (आईओसी कंटेनर के बिना) सी # में गतिशील रूप से एक क्लास कैसे बनाइए?

कैसे एंकर टैग पर डिफ़ॉल्ट को रोकने के लिए?

मान लें कि मेरे पास एक एंकर टैग है जैसे कि

<a href="#" ng-click="do()">Click</a> 

मैं नेविगेट करने से ब्राउज़र को # में AngularJS में कैसे रोक सकता / सकती हूं?

वेब के समाधान से एकत्रित समाधान "कैसे एंकर टैग पर डिफ़ॉल्ट को रोकने के लिए?"

अद्यतनः मैंने तब से इस समाधान पर अपना मन बदल लिया है। अधिक विकास और समय पर काम करने के बाद, मुझे विश्वास है कि इस समस्या का बेहतर समाधान निम्न कार्य करना है:

 <a ng-click="myFunction()">Click Here</a> 

और फिर एक अतिरिक्त नियम रखने के लिए अपना css अपडेट करें:

 a[ng-click]{ cursor: pointer; } 

इसकी अधिक सरल और सटीक समान कार्यक्षमता प्रदान करता है और यह बहुत अधिक कुशल है। आशा है कि भविष्य में इस समाधान को देखने वाले किसी और को मददगार हो सकता है।


निम्नलिखित मेरा पिछला समाधान है, जिसे मैं यहां विरासत के उद्देश्यों के लिए छोड़ रहा हूं:

अगर आपको यह समस्या बहुत अधिक है, तो एक सरल निर्देश जो इस मुद्दे को ठीक करेगा, वह निम्नलिखित है:

 app.directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){ elem.on('click', function(e){ e.preventDefault(); }); } } }; }); 

यह देखने के लिए कि उनके href विशेषता या तो एक खाली स्ट्रिंग ( "" ) या एक हैश ( '#' ) है या एक ng-click असाइनमेंट है, यह देखने के लिए सभी एंकर टैग ( <a></a> ) जांचता है। अगर यह इन शर्तों में से कोई भी पाता है, तो वह घटना को पकड़ लेता है और डिफ़ॉल्ट व्यवहार को रोकता है।

केवल नीचे की ओर यह है कि यह सभी एंकर टैग के लिए इस निर्देश को चलाता है। इसलिए यदि आपके पास पृष्ठ पर कई एंकर टैग हैं और आप केवल उनमें से छोटी संख्या के लिए डिफ़ॉल्ट व्यवहार को रोकना चाहते हैं, तो यह निर्देश बहुत कुशल नहीं है हालांकि, मैं लगभग हमेशा preventDefault को preventDefault चाहता हूं, इसलिए मैं अपने AngularJS क्षुधा में इस निर्देश का उपयोग कर रहा हूं।

एनजीएचएचआरएफ के लिए डॉक्स के अनुसार आपको एआरआर छोड़ने में सक्षम होना चाहिए या href = ""।

 <input ng-model="value" /><br /> <a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br /> <a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br /> <a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br /> <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br /> 

आप $ इवेंट ऑब्जेक्ट को अपनी विधि में पास कर सकते हैं, और $event.preventDefault() पर कॉल कर सकते हैं, ताकि डिफ़ॉल्ट प्रसंस्करण नहीं होगा:

 <a href="#" ng-click="do($event)">Click</a> // then in your controller.do($event) method $event.preventDefault() 

मैं इस तरह की बातों के लिए निर्देशों का उपयोग करना पसंद करता हूं यहाँ एक उदाहरण है

 <a href="#" ng-click="do()" eat-click>Click Me</a> 

और eat-click के निर्देशक कोड:

 module.directive('eatClick', function() { return function(scope, element, attrs) { $(element).click(function(event) { event.preventDefault(); }); } }) 

अब आप किसी भी तत्व को eat-click विशेषता को जोड़ सकते हैं और इसे preventDefault() 'एड स्वचालित रूप से

लाभ:

  1. आपको अपने do() फ़ंक्शन में बदसूरत $event ऑब्जेक्ट पास करने की ज़रूरत नहीं है
  2. आपका नियंत्रक अधिक इकाई परीक्षण योग्य है क्योंकि उसे $event बाहर करने की आवश्यकता नहीं है। Oject

हालांकि, रेन ने एक महान समाधान दिया

 <a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

मुझे व्यक्तिगत रूप से पाया गया कि आपको कुछ घटनाओं में $ event.stopPropagation () की आवश्यकता होती है ताकि कुछ दुष्प्रभावों से बचने के लिए

 <a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();"> Click</a> 

मेरा समाधान होगा

 ng-click="$event.preventDefault()" 

मुझे सबसे आसान समाधान मिला है यह एक है:

 <a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

तो इन उत्तरों के माध्यम से पढ़ना, @ क्रिस में अभी भी "सही" जवाब है, मुझे लगता है, लेकिन इसकी एक समस्या है, यह "सूचक" नहीं दिखाता ….

इसलिए कर्सर जोड़ने की आवश्यकता के बिना इस समस्या को हल करने के दो तरीके हैं: सूचक शैली:

  1. javascript:void(0) प्रयोग करें javascript:void(0) # बजाय javascript:void(0) :

     <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a> 
  2. ng-click डायरेक्टिव में $event.preventDefault() उपयोग ng-click (ताकि आप अपने नियंत्रक को $event.preventDefault() संबंधित संदर्भों के साथ जंक न दें):

     <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a> 

व्यक्तिगत रूप से मैं बाद के उत्तरार्ध में पूर्व पसंद करते हैं। javascript:void(0) के अन्य लाभ यहां चर्चा किए गए हैं उस लिंक में "विवादास्पद जावास्क्रिप्ट" की भी चर्चा है जो डरावनी हाल ही में है, और यह जरूरी नहीं कि किसी कोणीय अनुप्रयोग पर सीधे आवेदन करें।

आप निम्नानुसार कर सकते हैं

एंकर ( a ) टैग से 1.Remove href विशेषता

2. सीट में सूचक कर्सर सीएनजी क्लिक तत्वों पर क्लिक करें

  [ng-click], [data-ng-click], [x-ng-click] { cursor: pointer; } 

एचटीएमएल

यहां शुद्ध कोणीयज: एनजी-क्लिक फ़ंक्शन के पास आप रोकथाम अर्धविराम से अलग () फ़ंक्शन लिख सकते हैं

 <a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a> 

जे एस

 $scope.do = function() { alert("do here anything.."); } 

(या)

आप इस तरह से आगे बढ़ सकते हैं, यह पहले से ही यहाँ कुछ चर्चा हुई है।

एचटीएमएल

 <a href="#" ng-click="do()">Click me</a> 

जे एस

 $scope.do = function(event) { event.preventDefault(); event.stopPropagation() } 

चूंकि आप एक वेब ऐप बना रहे हैं इसलिए आपको लिंक की आवश्यकता है?

बटन के लिए अपने एंकर को स्वैप करें!

 <button ng-click="do()"></button> 

यदि अभी भी प्रासंगिक है:

 <a ng-click="unselect($event)" /> ... scope.unselect = function( event ) { event.preventDefault(); event.stopPropagation(); } ... 

यह विकल्प आज़माएं जो मैं देख सकता हूं अभी तक ऊपर सूचीबद्ध नहीं है:

 <a href="" ng-click="do()">Click</a> 

मैं इसके साथ जाना होगा:

 <a ng-click="do()">Click</a> 
  • क्योंकि डॉक्स के अनुसार आपको एआरआर छोड़ने में सक्षम होना चाहिए और फिर कोणीय आपके लिए डिफॉल्ट को रोकने में सक्षम होगा!

पूरी तरह से यह रोकने के लिए डिफ़ॉल्ट बात मेरे लिए भ्रमित हो गया है, इसलिए मैंने एक जेएसएफडियल बनाया है जिसमें समझाया गया है कि कब और कब कोराल डिफ़ॉल्ट को रोक रहा है

JSFiddle कांच का निर्देशन का उपयोग कर रहा है – तो यह ठीक ही होना चाहिए। आप यहां स्रोत कोड देख सकते हैं: एक टैग स्रोत कोड

मुझे उम्मीद है कि यह कुछ के लिए स्पष्टीकरण में मदद करेगा

मुझे डॉक्टर को एनजीएचएफएफ पर पोस्ट करना पसंद आया लेकिन मैं अपनी प्रतिष्ठा के कारण नहीं कर सकता

यही मैं हमेशा करता हूं। एक जादू की तरह काम करता है!

 <a href ng-click="do()">Click</a> 

या यदि आपको इनलाइन की आवश्यकता है तो आप यह कर सकते हैं:

 <a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a> 

एक href पर होने वाली घटनाओं से बचने का सबसे सुरक्षित तरीका यह होगा कि वह इसे परिभाषित करे

 <a href="javascript:void(0)" ....> 

मुझे अव्यवस्था के लिए href एट्रिब्यूट के मूल्य की उपस्थिति (जब जेएस बंद है) की आवश्यकता है, इसलिए मैं खाली href विशेषता (या "#") का उपयोग नहीं कर सकता, लेकिन उपरोक्त कोड मेरे लिए काम नहीं कर रहा है, क्योंकि मुझे एक ईवेंट की आवश्यकता है ई) चर मैंने अपना निर्देश बनाया:

 angular.module('MyApp').directive('clickPrevent', function() { return function(scope, element, attrs) { return element.on('click', function(e) { return e.preventDefault(); }); }; }); 

HTML में:

 <a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a> 

टेनिसजेंट के उत्तर से उधार लेना मुझे पसंद है कि आपको सभी लिंक्स पर जोड़ने के लिए एक कस्टम निर्देश बनाने की ज़रूरत नहीं है। हालांकि, मैं उसे IE8 में काम करने के लिए नहीं मिल सका। आखिरकार मेरे लिए क्या काम किया गया है (1.0.6 को कोणीय का उपयोग करके)

ध्यान दें कि 'बाँध' आपको कोणीय द्वारा प्रदान की गई jqLite का उपयोग करने की अनुमति देता है ताकि पूर्ण jQuery के साथ लपेटे जाने की आवश्यकता न हो। इसके अलावा स्टॉपप्रोगोगेशन विधि की आवश्यकता है।

 .directive('a', [ function() { return { restrict: 'E', link: function(scope, elem, attrs) { elem.bind('click', function(e){ if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){ e.preventDefault(); e.stopPropagation(); } }) } }; } ]) 

कोणीय बूटस्ट्रैप ड्रॉप डाउन के लिए एंकर का उपयोग करते समय मुझे यह एक ही समस्या में भाग लिया गया था। मैंने पाया कि एकमात्र उपाय है जो अवांछित दुष्प्रभावों से बचा जाता है (यानी ड्रॉप डाउन को रोकने के कारण डीफॉल्ट () का प्रयोग बंद करने के लिए) निम्नलिखित का उपयोग करना था:

  <a href="javascript:;" ng-click="do()">Click</a> 

अगर आप कभी भी href पर नहीं जाना चाहते हैं … आपको अपना मार्कअप बदलना चाहिए और एक बटन का उपयोग न करें, क्योंकि यह एंकर टैग नहीं है, क्योंकि यह एक लंगर या एक लिंक नहीं है। उलटा अगर आपके पास एक बटन होता है जो कुछ चेक करता है और फिर रीडायरेक्ट करता है तो यह एक लिंक / एंकर टैग होना चाहिए और एसईओ उद्देश्यों के लिए एक बटन नहीं होना चाहिए [परीक्षण के लिए यहां सम्मिलित करें]

लिंक्स के लिए आप केवल सशर्त रूप से परिवर्तनों को सहेजने के लिए प्रेरित करना चाहते हैं, या गंदे राज्य को स्वीकार कर सकते हैं … आपको एनजी-क्लिक = "कुछ फंक्शन ($ इवेंट)" का उपयोग करना चाहिए और आपकी मान्यता पर कुछ फंक्शन में त्रुटि रोकना डीफॉल्ट और या रोकप्रोग्राम।

यह भी सिर्फ इसलिए कि आप इसका मतलब यह नहीं कर सकते कि आपको चाहिए जावास्क्रिप्ट: शून्य (0) दिन में अच्छी तरह से काम किया था … लेकिन नापाक हैकर्स / क्रैकर्स ब्राउज़र्स फ्लैग ऐप्स / साइटों के कारण जो एक href के अंदर जावास्क्रिप्ट का उपयोग करते हैं … ऊपर से डकटाइप करने का कोई कारण नहीं है ..

यह 2016 के बाद से 2010 ऐसे लिंक का उपयोग करने के लिए कहीं भी कोई कारण नहीं होना चाहिए जो बटन की तरह कार्य करते हैं … अगर आपको अभी भी IE8 और नीचे का समर्थन करना है तो आपको अपने व्यवसाय की जगह का पुनः मूल्यांकन करने की आवश्यकता है।

बहुत सारे उत्तर उतार-चढ़ाव लग रहे हैं मेरे लिए, यह काम करता है

  <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a> 
 /* NG CLICK PREVENT DEFAULT */ app.directive('ngClick', function () { return { link: function (scope, element, attributes) { element.click(function (event) { event.preventDefault(); event.stopPropagation(); }); } }; }); 

आपको क्या करना चाहिए, पूरी तरह से href विशेषता को छोड़ देना चाहिए

यदि आप तत्व निर्देश के लिए स्रोत कोड को देखें (जो कोणीय कोर का हिस्सा है), तो यह पंक्ति 29 – 31:

 if (!element.attr(href)) { event.preventDefault(); } 

जिसका अर्थ है कि कोणीय पहले ही href के बिना लिंक के मुद्दे को हल कर रहा है। आपके पास एकमात्र मुद्दा सीएसएस समस्या है। आप एनजी-क्लिक वाले एन्कर्स के लिए अभी भी सूचक शैली को लागू कर सकते हैं, उदाहरण के लिए:

 a[ng-click] { /* Styles for anchors without href but WITH ng-click */ cursor: pointer; } 

इसलिए, आप अपनी साइट को एक सूक्ष्म, अलग स्टाइल के साथ वास्तविक लिंक के आधार पर चिह्नित कर सकते हैं, फिर उस कार्य को लिंक करते हैं।

हैप्पी कोडिंग!

उद्देश्य प्राप्त करने के लिए आप यूआरएल रीडायरेक्शन को $ स्थान के एचटीएमएल 5 मेोड के अंदर अक्षम कर सकते हैं। आप इसे पेज के लिए इस्तेमाल किए जाने वाले विशिष्ट नियंत्रक के अंदर परिभाषित कर सकते हैं। कुछ इस तरह:

 app.config(['$locationProvider', function ($locationProvider) { $locationProvider.html5Mode({ enabled: true, rewriteLinks: false, requireBase: false }); }]); 

एक वैकल्पिक हो सकता है:

 <span ng-click="do()">Click</span>