Href вызывает непреднамеренную перезагрузку страницы с помощью Angularjs и Twitter Bootstrap

Я работаю над проектом, который использует Angularjs и Twitter Bootstrap.

Bootstrap использует # для переключения компонентов, таких как popover, modal и т.д. например:

<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

Я видел другой пост, о котором говорил Стьюи. Он объясняет html5mode и hashbang в angularjs, но это действительно не решает мою проблему.

Я попытался поместить html5mode, и он все еще перезагружает страницу, когда я нажимаю кнопку

Ответы

Ответ 1

Хешбанг в Angular используется для маршрутизации. Посмотрите учебник для более глубокого понимания того, как он работает здесь.

Вы также можете посмотреть Angular UI Bootstrap.

Обычный Boostrap не был создан с учетом Angular, поэтому есть несколько вещей, которые не соответствуют Angular. Поэтому команда решила передать Boostrap в директивы Angular, давая вам возможность полностью использовать функции Angular ng- (с которыми вы не сможете легко справиться с помощью обычного Boostrap).

Из-за того, как работает маршрутизация, я не думаю, что вы сможете делать то, что хотите, и вам не нужно. Поскольку вы используете кнопку <a> в качестве кнопки, сделайте ее обычной кнопкой и добавьте ng-click:

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

Это способ Angular (и как работает ).

Наконец, в Angular <a> является директивой docs здесь, поэтому, если вы хотите предотвратить щелчок по умолчанию, оставьте href="":

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

Ответ 2

Это из-за перезаписи HTML-ссылок Angular, объяснил здесь.

Чтобы предотвратить переписывание местоположения, добавьте target=_self в эти загрузочные ссылки.

Итак, вместо <a href="#myModal"> вам нужно <a href="#myModal" target="_self">

Ответ 3

Я решил: Просто измените атрибут HREF атрибутом DATA-TARGET.

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

Ответ 4

У меня были похожие проблемы, полная перезагрузка страницы и просто просмотр переключений.

Поскольку Angular приложения - это SAP, мы только обновляем все, что приходит после имени хоста /#/.

Я создаю экземпляр SuperController, типа контроллера уровня приложения, и, как сказал Карлос V, вы можете использовать ng-click вместо href для обновления $location.path().

Здесь сценарий ссылка

Не может быть оптимальным решением. Надеюсь, что это поможет.

Ответ 5

Используйте что-то вроде этого в ur js

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

    e.preventDefault();
});

Просто убедитесь, что вы создали класс для своего "а", иначе вы сделаете это для всех.

Ответ 7

Вперед и сделайте следующее изменение: поместите javascript: void (0) вместо #myModal для href. Используйте Javascript для запуска вашего модального открытия, разместив событие click.

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

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