Href викликає непередбачувану перезавантаження сторінки за допомогою Angularjs та Twitter Bootstrap

Я працюю над проектом, який використовує Angularjs і Twitter Bootstrap.

Бутстерп використовує # для перемикання таких компонентів, як popover, модал тощо. наприклад:

Launch demo modal

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

Modal header

  </div>
  <div class="modal-body">
    
One fine body… </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>

The problem is when I click on button with such href attribute, it causes full page reload, which means, everything in current page is lost. Is there a way to prevent this?

деяка додаткова інформація:

коли я навожу на кнопку, URL-адреса дивна. наприклад, URL-адреса моєї поточної сторінки

localhost:8080/#/account

кнопка href є

href="#myModal"

Я очікую побачити url

localhost:8080/#/account#myModal

Однак те, що я бачу, є

localhost:8080/#myModal

Я не впевнений, що це пов'язано з моєю проблемою.

Спасибі заздалегідь!

EDIT 1

Я бачив іншу публікацію, про яку говорили Стівей . Це пояснює html5mode і hashbang в angularjs, але це не вирішує мою проблему.

Я намагався вставити html5mode, і він все ще перезавантажує сторінку, коли я натискаю кнопку

25
чому ви використовуєте , коли в ній є чітка та визначена семантична роль внутрішньої навігації на сторінці? Це не посилання на ресурс, чому б не використовувати ?
додано Автор Mike 'Pomax' Kamermans, джерело
Ви переглянули параметри data-target ? Таким чином, ви можете дозволити кутові вибрати href.
додано Автор Sherbrow, джерело

7 Відповіді

This is because of HTML link rewriting of Angular, explained here.

Щоб запобігти переписуванню місцеположення, додайте target = _self до цих початкових посилань.

So instead of you need

24
додано
Вау чудовий відгук ustun! Не знали, що існували
додано Автор SM3RKY, джерело
Простий та ефективний! Працюй, як чарівність, спасибі!
додано Автор AlvaroAV, джерело
дякую @ustun ви врятували мій день.
додано Автор Satish Singh, джерело

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

Ви також повинні поглянути на завантажувальний інтерфейс для кутового інтерфейсу .

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


Due to the way routing works, I don't think you would be able to do what you want, and you shouldn't need to. Since you're using the as a button, make it a regular button and add an ng-click:

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

Це кутовий спосіб (і як працює кутовий інтерфейс завантажувача).

Lastly, in Angular, the is a directive docs here, so if you want to prevent the default click, leave href="":

Save
9
додано

Go ahead & make the below change, of putting javascript:void(0) instead of #myModal for href. Use Javascript to trigger your modal opening, by putting a click event.

    
8
додано
.... ні, просто немає. Ніколи не робіть цього.
додано Автор JeffC, джерело

Я вирішив: Просто просто змініть атрибут HREF за допомогою атрибута DATA-TARGET.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<div>
    <!-- Nav tabs -->
    
    <!-- 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>
</div> </div>

4
додано
Спасибі, ти врятував свій час :)
додано Автор Syed Faizan, джерело
Спасибі, це, мабуть, найпростіше рішення!
додано Автор firecape, джерело

There's a simpler solution here: How to prevent redirecting in Angular Js1.2

Просто додайте target = "_ self" до своїх посилань

2
додано

У мене були подібні проблеми, повна перезавантаження сторінки, а не просто перегляд зору.

Оскільки кутові додатки є SAP, ми оновлюємо лише те, що відбувається після імені хоста/# /.

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

Here's a fiddle link

Може бути, не найбільш оптимальним рішенням. Сподіваюся, це допомагає.

1
додано

Використовуйте щось на зразок цього в ur js

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

    e.preventDefault();
});

Просто переконайтеся, що ви клацнете для свого "a", інакше ви будете робити це для всіх.

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram