href khiến tải lại trang không mong muốn bằng Angularjs và Twitter Bootstrap

Question

Tôi đang làm việc trên một dự án sử dụng Angularjs và Twitter Bootstrap.

Bootstrap sử dụng # để chuyển đổi các thành phần như popover, phương thức, vv ví dụ:

<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> 

Vấn đề là khi tôi bấm vào nút có thuộc tính href như vậy, nó gây ra lại toàn bộ trang, có nghĩa là, mọi thứ trong trang hiện tại đều bị mất. Có cách nào để ngăn chặn điều này không?

một số thêm thông tin:

khi tôi di chuột vào nút, url là lạ. ví dụ, URL của trang hiện tại của tôi là

localhost:8080/#/account 

href của nút là

href="#myModal" 

tôi mong đợi để xem url

localhost:8080/#/account#myModal 

Tuy nhiên, những gì tôi thấy là

localhost:8080/#myModal 

Tôi không chắc chắn nếu điều này có liên quan d cho vấn đề của tôi.

Cảm ơn trước!

EDIT 1

Tôi đã thấy những bài khác mà Stewie nói về. Nó giải thích html5mode và hashbang trong angularjs, nhưng nó không thực sự giải quyết vấn đề của tôi.

Tôi đã thử đưa html5mode, và nó vẫn tải lại trang khi tôi nhấn vào nút

Answer 1

Hàm băm trong Angular được sử dụng cho routing. Xem hướng dẫn để có thông tin chi tiết hơn về cách hoạt động của nó here.

Bạn cũng nên xem Angular UI Bootstrap.

Boost Boost thường không được xây dựng với Angular trong tâm trí, do đó, có một vài điều không phù hợp với Angular. Vì vậy, nhóm đã quyết định chuyển Boostrap thành chỉ thị Angular, cho phép bạn sử dụng đầy đủ các tính năng của ng- của Angular (bạn sẽ không thể thực hiện dễ dàng chỉ với Boostrap thông thường).

---

Do cách định tuyến hoạt động, tôi không nghĩ bạn có thể làm những gì bạn muốn và bạn không cần phải làm như vậy.Vì bạn đang sử dụng <a> như một nút, làm cho nó một nút thường xuyên và thêm một ng-click:

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

Đây là cách góc (và làm thế nào kiễu góc UI Bootstrap hoạt động).

Cuối cùng, trong góc, các <a> là một chỉ thị docs here, vì vậy nếu bạn muốn ngăn chặn các nhấp chuột mặc định, rời href="":

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

Answer 2

Đi trước & thực hiện thay đổi dưới đây, đưa javascript: void (0) thay vì #myModal cho href. Sử dụng Javascript để kích hoạt mở phương thức của bạn bằng cách đặt một sự kiện nhấp chuột.

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

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

Answer 3

Tôi có vấn đề tương tự, đầy đủ trang tải lại vs chỉ xem chuyển đổi.

Vì ứng dụng góc là SAP, chúng tôi chỉ cập nhật mọi thứ xuất hiện sau tên máy chủ/# /.

Tôi khởi tạo SuperController, loại trình điều khiển mức ứng dụng và như Carlos V đã nói, bạn có thể sử dụng ng-click thay vì href để cập nhật $location.path().

Dưới đây là một fiddle link

Có thể không phải là giải pháp tối ưu nhất. Hy vọng nó giúp.

Answer 4

Điều này là do viết lại liên kết HTML của Angular, được giải thích here.

Để tránh viết lại vị trí, hãy thêm target=_self vào các liên kết khởi động đó.

Vì vậy, thay vì <a href="#myModal"> bạn cần <a href="#myModal" target="_self">

Answer 5

tôi giải quyết: Đơn giản chỉ cần thay đổi thuộc tính HREF bởi thuộc tính DATA-MỤC TIÊU.

<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

Sử dụng một cái gì đó như thế này trong ur js

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

    e.preventDefault(); 
}); 

Chỉ cần chắc chắn rằng bạn làm cho một lớp học cho bạn 'a' nếu không bạn sẽ làm điều đó cho tất cả của một người.

Answer 7

Có một giải pháp đơn giản ở đây: How to prevent redirecting <a href="#something"> in Angular Js1.2

Chỉ cần thêm target="_self" để liên kết của bạn