href ने Angular.js में एनजी-क्लिक को ओवरराइड किया

Question

जब दोनों, href और एनजी-क्लिक विशेषताओं को परिभाषित किया जाता है:

<a href="#" ng-click="logout()">Sign out</a>

hrefविशेषता एनजी क्लिक पर पूर्वता लेता है।

मैं एनजी-क्लिक की प्राथमिकता बढ़ाने के लिए एक रास्ता तलाश रहा हूं।

href ट्विटर बूटस्ट्रैप के लिए आवश्यक है, मैं इसे हटा नहीं सकता।

Comments

क्या आप "ट्विटर बूटस्ट्रैप के लिए href की आवश्यकता है" पर विस्तार से बता सकते हैं? इसका कौन सा भाग? सीएसएस या जावास्क्रिप्ट?

— pkozlowski.opensource

ट्विटर बूटस्ट्रैप नेवी "विजेट" लिंक का उपयोग करने के लिए सेटअप है, यदि आप इसमें एक बटन जोड़ते हैं, तो एक भी जिसे लिंक की तरह देखने के लिए स्टाइल किया जाता है यह नेविगेशन की स्टाइल को तोड़ता है। यह शायद शब्दार्थ HTML नहीं है, लेकिन @ स्केचफैममे का समाधान वही करता है जो मैं (और शायद पॉल) करना चाहता हूं।

— 16 अक्टूबर को BenCr

मेरे द्वारा कही गई सभी बातों को अनदेखा करें, अगर आप सही एचटीएमएल और कक्षाओं का उपयोग करते हैं, तो नेबर बटन के साथ पूरी तरह से काम करता है। getbootstrap.com/compenders/#navbar

— BenCr

आपको मिथू द्वारा उत्तर को स्वीकार करना चाहिए, जो कि एक खाली यूआरएल का उपयोग करना है

— पीटर मोरिस

@Paul ने मूल पोस्टर में पूछा कि कैसे नेविगेट न करने के लिए एक <a href> प्राप्त करें। स्वीकृत उत्तर एक बटन पर स्विच करने के लिए कहता है। हालांकि यह काम करता है यह समस्या का समाधान नहीं है, खासकर अगर खुद की तरह आप <a href> का उपयोग करने के लिए मजबूर हैं क्योंकि यह बूटस्ट्रैप मेनू या कुछ और है। इस विशिष्ट प्रश्न का सही समाधान खाली url <a href="" ng-click="whatever()"> लॉग आउट करें </a> का उपयोग करना है - मैंने इसका परीक्षण किया और इसकी पुष्टि कर सकता है कि यह काम करता है। शुक्र है कि किसी और ने सही जवाब दिया या मैं अभी भी अटका हुआ हूं।

— पीटर मॉरिस

Answer 1

अगर आपको यूआरआई की जरूरत नहीं है तो आपको बस एक बटन टैग का उपयोग करना चाहिए।

Comments

हां, अगर आप इस बारे में विस्तार से बता सकते हैं कि ट्विटर बूटस्ट्रैप को इसकी आवश्यकता कैसे है, तो शायद मैं और अधिक मदद कर सकता हूं।

— ज्योफ

यह खोज इंजन के साथ कैसे काम करता है? मैं AngularJS रूटिंग का उपयोग कर रहा हूं और मुझे अपने सभी आंतरिक एप्लिकेशन लिंक के लिए एक सेवा में राज्य बनाए रखने की आवश्यकता है, मैं $ स्थान का उपयोग करता हूं, लेकिन href को हटाने से खोज इंजन के लिए साइट पर चलना असंभव हो जाता है।

— डार्र्र्र्र्र्रन

बटन उनके अंदर अन्य तत्व नहीं हो सकते हैं, इसलिए स्टाइल के लिए, आप ऐसा नहीं करना चाहेंगे - अगर आपको इसके अंदर की चीजों की आवश्यकता है।

— शेरिफडेरेक

Answer 2

कोणीय प्रलेखन साइट से यह उदाहरण सिर्फ hrefएक खाली स्ट्रिंग को निर्दिष्ट किए बिना भी करता है :

[<a href ng-click="colors.splice($index, 1)">X</a>]

http://docs.angularjs.org/api/ng.directive:select

Comments

जब मैं यह कोशिश करता हूं कि सभी लिंक पर जाएं, जो मेरे द्वारा किए गए व्यवहार के कारण नहीं है। दूसरा तरीका ( href="#") पृष्ठ पुनः लोड करने का कारण बनता है, जो गलत भी है।

— Rhys van der Waerden

यह IE9 को हैंड कर्सर नहीं दिखाता है। इसका उपयोग href=""करने से।

— Juampy NR

@ विजयी, लिंक पर हाथ CSS के साथ संभाला जा सकता है। दिया गया यह उत्तर आधिकारिक एंगुलरजेएस तरीका है।

— तत्पश्चात

# हैश लिंक की तरह व्यवहार किया जाएगा।

— शेरिफडेरेक

<a href="javscript:void(0)" ng-click="logout()">Sign out</a>आपकी भी अच्छी सेवा करेगा

— Marios Fakiolas

Answer 3

आप सीधे अपने टेम्पलेट में क्लिक इवेंट के डिफ़ॉल्ट व्यवहार को रोक सकते हैं।

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

प्रति कोणीय प्रलेखन ,

NgClick और ngFocus जैसे निर्देश उस अभिव्यक्ति के दायरे में एक $ घटना वस्तु को उजागर करते हैं।

Comments

यह एक बेहतरीन उपाय है। यदि आपके पास एक href है, तो आप उसे एक नए टैब में खोलने के लिए राइट क्लिक कर सकते हैं, लेकिन बाएं क्लिक पर इसे एनजी-क्लिक कहते हैं। वास्तव में मैं क्या देख रहा था

— टॉम ग्रांट

एक बार फिर एक शानदार जवाब। बाएँ और दाएँ दोनों काम पर क्लिक करें

— Jay Jay Jay

रूटिंग ट्रिगर के बिना बूटस्ट्रैप हिंडोला नियंत्रण की अनुमति के लिए महान काम किया। धन्यवाद!

— जेसन मैगार्ड

उत्तम! मैं लिंक के साथ जारी रख सकता हूं और Google में अधिक सूचकांक प्राप्त कर सकता हूं और अजाक्स में कॉल करने के लिए एनजी-क्लिक का उपयोग कर सकता हूं। धन्यवाद।

— गुइलहर्मे आइए

महान समाधान, त्वरित और उपयोगी। धन्यवाद!

— जोशु रोचा

Answer 4

यहाँ एक और उपाय है:

<a href="" ng-click="logout()">Sign out</a>

यानी बस href विशेषता से # निकालें

Comments

पूछे गए प्रश्न के लिए, यह समाधान होना चाहिए। कोणीय 1.1.5 के रूप में अच्छी तरह से काम किया

— सिंद्रे

ऐसा लगता है कि <a href="" ng-click=""> Android 2.3.x ब्राउज़र में एनजी-क्लिक को रोक देगा। मैं अंत में <a href="javascript:void(0)" ng-click="">

— duckegg

डकगैग का सुझाव सबसे अच्छा है

— जिआ वेपदोइक

Answer 5

बस एक और इशारा। यदि आपको वास्तविक URL की आवश्यकता है (ब्राउज़र पहुंच का समर्थन करने के लिए) तो आप निम्न कार्य कर सकते हैं:

टेम्पलेट:

<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>

निर्देश:

$scope.linkClicked = function(link){
    // your code here
    $location.path(link);
};

इस तरह लिंकक्लिप्ड () में आपके कोड के पास लिंक को नेविगेट करने से पहले निष्पादित करने का मौका होगा

Comments

यह समाधान काम करता है और केवल बाएं क्लिक व्यवहार को बदलता है, राइट क्लिक बरकरार रहता है (संदर्भ मेनू), जिसमें href में लिंक की संभावना भी शामिल है। तो यह है कि बहुत अधिक सामान्य समाधान की तुलना में बहुत अधिक है, जो वास्तव में अधिक सीधे सवाल का जवाब देता है।

— निर्गमन

Answer 6

कोणीय में, <a>s निर्देश हैं । जैसे, अगर आपके पास कोई खाली है hrefया नहीं href, तो कोणीय कॉल करेगा event.preventDefault।

से स्रोत :

    element.on('click', function(event){
      // if we have no href url, then don't navigate anywhere.
      if (!element.attr(href)) {
        event.preventDefault();
      }
    });

यहाँ एक है plnkr लापता प्रदर्शन hrefपरिदृश्य।

Answer 7

यह मेरे लिए IE 9 और AngularJS v1.0.7 में काम किया:

<a href="javascript:void(0)" ng-click="logout()">Logout</a>

कार्य समाधान के लिए duckeggs की टिप्पणी के लिए धन्यवाद !

Comments

काम करता है, लिंक आपके url को नहीं बदलता है और विज़िट के रूप में चिह्नित नहीं है। सबसे बढ़िया उत्तर!

— जिमहि

Answer 8

इस प्रश्न के लिए यहाँ बहुत सारे उत्तर हैं लेकिन ऐसा लगता है कि वास्तव में यहाँ क्या हो रहा है, इसे लेकर थोड़ा भ्रम है।

सबसे पहले, आपका आधार

"href ने Angular.js में एनजी-क्लिक को ओवरराइड किया"

गलत है। वास्तव में क्या हो रहा है कि आपके क्लिक के बाद, क्लिक इवेंट को पहले कोणीय ( ng-clickकोणीय 1.x और clickकोणीय 2.x + में निर्देश द्वारा परिभाषित) द्वारा संभाला जाता है और फिर यह प्रचारित करना जारी रखता है (जो अंततः ब्राउज़र को नेविगेट करने के लिए ट्रिगर करता है। url को hrefविशेषता से परिभाषित किया गया है) ( इसे जावास्क्रिप्ट में ईवेंट प्रचार के बारे में अधिक देखें )

यदि आप इससे बचना चाहते हैं, तो आपको ईवेंट इंटरफ़ेस की preventDefault()विधि का उपयोग करके इवेंट प्रचार रद्द करना चाहिए :

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

(यह शुद्ध जावास्क्रिप्ट कार्यक्षमता है और कोणीय से कोई लेना देना नहीं है)

अब, यह आपकी समस्या को पहले ही हल कर देगा लेकिन यह इष्टतम समाधान नहीं है। कोणीय, सही, MVC पैटर्न को बढ़ावा देता है । इस समाधान के साथ, आपका html टेम्पलेट जावास्क्रिप्ट लॉजिक के साथ मिलाया गया है। आपको यथासंभव इससे बचने की कोशिश करनी चाहिए और अपने तर्क को अपने कोणीय नियंत्रक में रखना चाहिए। तो एक बेहतर तरीका होगा

<a href="#" ng-click="logout($event)" />

और आपके लॉगआउट () विधि में:

logout($event) {
   $event.preventDefault();
   ...
}

अब क्लिक ईवेंट ब्राउज़र तक नहीं पहुंचेगा, इसलिए यह इंगित की गई लिंक को लोड करने का प्रयास नहीं करेगा href। (हालांकि ध्यान दें कि यदि उपयोगकर्ता लिंक पर राइट क्लिक करता है और सीधे लिंक को खोलता है, तो बिल्कुल भी एक क्लिक इवेंट नहीं होगा। इसके बजाय यह सीधे hrefविशेषता द्वारा बताए गए url को लोड करेगा ।)

ब्राउज़रों में लिंक किए गए रंग के बारे में टिप्पणियों के बारे में। फिर से इसे कोणीय से कोई लेना-देना नहीं है, अगर आपके href="..."अंक आपके ब्राउज़र द्वारा डिफ़ॉल्ट रूप से लिंक किए गए यूआरएल से लिंक किए गए रंग अलग होंगे। इसे CSS द्वारा नियंत्रित किया जाता है : चयनकर्ता का दौरा किया , आप इस व्यवहार को ओवरराइड करने के लिए अपनी सीएसएस को संशोधित कर सकते हैं:

a {
   color:pink;
}

PS1 :

कुछ उत्तर का उपयोग करने का सुझाव देते हैं:

<a href .../>

hrefएक कोणीय निर्देश है। जब आपका टेम्प्लेट कोणीय द्वारा संसाधित किया जाता है तो इसे परिवर्तित कर दिया जाएगा

<a href="" .../>

वे दो रास्ते अनिवार्य रूप से एक ही हैं।

Answer 9

बस href से पहले ng-click लिखिए .. यह मेरे लिए काम कर गया

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script>
    angular.module("module",[])
.controller("controller",function($scope){
  
  $scope.func =function(){
    console.log("d");
  }
  
})</script>
  </head>

  <body ng-app="module" ng-controller="controller">
    <h1>Hello ..</h1>
    <a ng-click="func()" href="someplace.html">Take me there</a>
  </body>

</html>

Answer 10

मुझे नहीं लगता कि आपको href से "#" निकालने की आवश्यकता है। Angularjs 1.2.10 के साथ निम्नलिखित कार्य करता है

<a href="#/" ng-click="logout()">Logout</a>

Answer 11

आप यह भी आज़मा सकते हैं:

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>

Answer 12

मैं आपके लिए एक उदाहरण जोड़ूंगा जो मेरे लिए काम करेगा और आप इसे अपनी इच्छानुसार बदल सकते हैं।

मैं अपने नियंत्रक के अंदर bellow कोड जोड़ता हूं।

     $scope.showNumberFct = function(){
        alert("Work!!!!");
     }

और मेरे विचार पृष्ठ के लिए मैं bellow कोड जोड़ता हूं।

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

Answer 13

क्या आपने लॉगआउट फ़ंक्शन के अंदर पुनर्निर्देशन की कोशिश की थी? उदाहरण के लिए, आपका लॉगआउट फ़ंक्शन निम्नानुसार है

$scope.logout = function()
{
  $scope.userSession = undefined;
  window.location = "http://www.yoursite.com/#"
}

तब आप बस कर सकते हैं

<a ng-click="logout()">Sign out</a>

Answer 14

कृपया इसे जाँचे

<a href="#" ng-click="logout(event)">Logout</a>

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}

Answer 15

//for dynamic elements - if you want it in ng-repeat do below code

angular.forEach($scope.data, function(value, key) {
     //add new value to object
    value.new_url  = "your url";
});

 <div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>

Answer 16

यह मेरे लिए काम करता है

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>