href एंगुलरजेस और ट्विटर बूटस्ट्रैप

Question

के साथ अनपेक्षित पृष्ठ रीलोड का कारण बनता है मैं एंगुलरजेस और ट्विटर बूटस्ट्रैप का उपयोग करने वाली एक परियोजना पर काम कर रहा हूं।

बूटस्ट्रैप ऐसे पॉपओवर, मोडल आदि उदाहरण के लिए जैसे घटकों टॉगल करने के लिए # का उपयोग करता है:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

जब मैं इस तरह के href विशेषता के साथ बटन पर क्लिक करें समस्या है, यह कारण बनता है पूरा पृष्ठ पुनः लोड, जिसका अर्थ है, वर्तमान पृष्ठ में सब कुछ खो गया है। क्या इसे रोकने का कोई तरीका है?

कुछ अतिरिक्त जानकारी:

जब मैं बटन पर होवर करें, यूआरएल अजीब है। उदाहरण के लिए, मेरे वर्तमान पृष्ठ का URL

localhost:8080/#/account 

है बटन के href

href="#myModal" 

मैं यूआरएल

localhost:8080/#/account#myModal 

देखने के लिए हालांकि उम्मीद है, मैं क्या देख रहा है

localhost:8080/#myModal 

मुझे यकीन नहीं है कि यह संबंधित है या नहीं मेरी समस्या के लिए डी।

अग्रिम धन्यवाद!

संपादित करें 1

मैं अन्य पोस्ट कि Stewie के बारे में बात देखा है। यह angularjs में html5mode और हैशबैंग बताता है, लेकिन यह वास्तव में मेरी समस्या का समाधान नहीं करता है।

मैं html5mode डालने की कोशिश की, और यह अभी भी पेज जब मैं बटन पर क्लिक करें

Answer 1

कोणीय में हैशबैंग routing के लिए उपयोग किया जाता है। here कैसे काम करता है इस बारे में गहन अंतर्दृष्टि के लिए ट्यूटोरियल को देखें।

आपको Angular UI Bootstrap पर भी एक नज़र डालना चाहिए।

नियमित बूस्ट्रैप को कोणीय के साथ दिमाग में नहीं बनाया गया था, इसलिए कुछ चीजें हैं जो कोणीय के अनुरूप नहीं हैं। तो टीम ने एंगुलर निर्देशों में बूस्ट्रैप बंदरगाह करने का फैसला किया, जिससे आपको कोणीय की ng- विशेषताओं का उपयोग करने की क्षमता मिल गई (जो आप नियमित रूप से नियमित बूस्ट्रैप के साथ आसानी से नहीं कर पाएंगे)।

---

तरह से काम करता है मार्ग के कारण, मुझे नहीं लगता कि आप क्या चाहते हो करने में सक्षम होगा, और आप की जरूरत नहीं होनी चाहिए।चूंकि आप एक बटन के रूप में <a> उपयोग कर रहे हैं, यह एक नियमित रूप से बटन बनाने के लिए और एक ng-click जोड़ें:

<button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button> 

यह कोणीय तरह से (और कैसे कोणीय यूआई बूटस्ट्रैप काम करता है) है।

अन्त में, कोणीय में, <a> एक निर्देश docs here है, इसलिए यदि आप डिफ़ॉल्ट क्लिक रोकना चाहते हैं, href="" छोड़:

<a href="" ng-click="model.$save()">Save</a> 

Answer 2

आगे & जाओ जावास्क्रिप्ट डालने की नीचे परिवर्तन करना, पुन: लोड: शून्य (0) के बजाय #myModal के लिए href। क्लिक ईवेंट डालने से, अपने मोडल खोलने को ट्रिगर करने के लिए जावास्क्रिप्ट का उपयोग करें।

<a href="javascript:void(0)" onClick="openModal()" role="button"... 

    function openModal(){ 
     $("#myModal").moda(); 
    } 

Answer 3

मैं इसी तरह के मुद्दों, पूरा पृष्ठ पुनः लोड बनाम बस स्विचिंग देखने के लिए किया था।

क्योंकि कोणीय ऐप्स एसएपी हैं, हम मेजबाननाम/#/के बाद जो कुछ भी आता है उसे अपडेट करते हैं।

मैं एक सुपरकंट्रोलर को तत्काल करता हूं, एप्लिकेशन स्तर नियंत्रक की तरह और कार्लोस वी ने कहा, आप $location.path() को अपडेट करने के लिए href के बजाय ng-click का उपयोग कर सकते हैं।

यहाँ एक बेला link

है सबसे इष्टतम समाधान नहीं हो सकता। आशा करता हूँ की ये काम करेगा।

Answer 4

यह कोणीय के HTML लिंक पुनर्लेखन के कारण है, here समझाया गया।

स्थान की पुनर्लेखन को रोकने के लिए, उन बूटस्ट्रैप लिंक पर target=_self जोड़ें।

तो <a href="#myModal"> के बजाय आप <a href="#myModal" target="_self">

Answer 5

जरूरत है मैं हल: आप सिर्फ आंकड़े-लक्ष्य विशेषता द्वारा HREF विशेषता बदल जाते हैं। उर js में इस तरह

<div> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist" id="myTabs"> 
 
     <li role="presentation" class="active"> 
 
      <a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> 
 
     </li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
     <div role="tabpanel" class="tab-pane active" id="home">Tortor Porta Sit</div> 
 
     <div role="tabpanel" class="tab-pane" id="profile">Duis mollis, est non commodo</div> 
 
    </div> 
 
</div>

Answer 6

कुछ उपयोग

$('a').on('click',function(e){ 

    e.preventDefault(); 
}); 

बस सुनिश्चित करें कि आप के लिए एक वर्ग बनाने के अपने 'एक' नहीं तो तुम सब एक के लिए यह करना होगा।

Answer 7

वहाँ एक सरल समाधान यहाँ है: How to prevent redirecting <a href="#something"> in Angular Js1.2

बस अपने लिंक को target="_self" जोड़ने