href가 Angularjs 및 Twitter Bootstrap을 사용하여 의도하지 않은 페이지 새로고침을 일으킨다.

href가 Angularjs 및 Twitter Bootstrap을 사용하여 의도하지 않은 페이지 새로고침을 일으킨다.

Angularjs와 Twitter Bootstrap을 활용한 프로젝트를 진행하고 있습니다.

부트스트랩은 #을 사용하여 팝오버, 모달 등의 컴포넌트를 전환합니다.다음은 예를 제시하겠습니다.

<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이 이상합니다.예를 들어, 현재 페이지의 URL은

localhost:8080/#/account

버튼의 href는

href="#myModal"

url을 볼 수 있을 것으로 예상합니다.

localhost:8080/#/account#myModal

하지만 제가 본 건

localhost:8080/#myModal

이것이 제 문제와 관련이 있는지 잘 모르겠습니다.

잘 부탁드립니다!

편집 1

Stewie가 말한 다른 게시물을 봤어요.html5mode와 hashbang에 대해 angularjs로 설명하지만 제 문제는 해결되지 않습니다.

html5 모드를 넣으려고 했는데 버튼을 클릭해도 페이지가 다시 로드됩니다.

이는 여기서 설명하는 Angular의 HTML 링크 개서 때문입니다.

위치를 다시 쓰는 것을 방지하려면target=_self부트스트랩 링크에 접속합니다.

그래서 대신<a href="#myModal">필요.<a href="#myModal" target="_self">

Angular의 해시방은 라우팅에 사용됩니다.튜토리얼을 참조해 주세요.

또, Angular UI 부트스트랩도 참조해 주세요.

일반 부스트랩은 Angular를 염두에 두고 제작되지 않았기 때문에 Angular와 일치하지 않는 부분이 거의 없습니다.그래서 팀은 Angular 디렉티브에 Boostrap을 포팅하기로 결정했고, Angular를 완전히 사용할 수 있게 되었습니다.ng-(일반 Boostrap만으로는 쉽게 할 수 없는 기능)

---

라우팅 방식으로는 원하는 것을 할 수 없을 것 같고, 그럴 필요도 없습니다.를 사용하고 있기 때문에<a>버튼으로서, 그것을 일반버튼으로 하고, 추가한다.ng-click:

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

이것이 Angular 방식(및 Angular UI 부트스트랩 작동 방식)입니다.

마지막으로 Angular에서<a>여기서 지시적인 문서이므로 기본 클릭을 방지하려면href="":

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

해결했습니다.DATA-TARGET 속성으로 HREF 속성을 변경하기만 하면 됩니다.

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

보다 심플한 솔루션이 있습니다.Angular Js1.2에서 <a href="#something">의 리다이렉트를 방지하는 방법

추가만 하면 됩니다.target="_self"링크에 접속하다

페이지 전체 새로고침과 보기 전환과 같은 문제가 있었습니다.

Angular 앱은 SAP이기 때문에 호스트 이름/#/ 뒤에 오는 것만 업데이트합니다.

하여 SuperController를 갱신할 수 .$location.path().

여기 바이올린 링크가 있습니다.

최적의 해결책은 아닐 수도 있습니다.도움이 됐으면 좋겠다.

ur js에 이런 것을 사용하세요.

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

    e.preventDefault();
});

A에 대한 수업을 꼭 만들어라. 그렇지 않으면 모든 A에 대해 수업을 할 것이다.

href에 #myModal이 아닌 javascript:void(0)를 넣기 위해 아래 내용을 변경해 주세요.Javascript를 사용하여 클릭 이벤트를 통해 모달 오픈을 트리거합니다.

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

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

언급URL : https://stackoverflow.com/questions/17251864/href-causes-unintended-page-reload-with-angularjs-and-twitter-bootstrap