href Angularjs және Twitter Bootstrap-пен күтпеген бетті қайта жүктейді

Мен Angularjs және Twitter Bootstrap пайдаланатын жобада жұмыс істеймін.

Bootstrap popover, modal және т.б. сияқты компоненттерді қосу үшін # пайдаланады. Мысалға:

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?

кейбір қосымша info:

түймеге апарсам, url күлкілі. мысалы, менің ағымдағы бетімнің URL мекенжайы

localhost:8080/#/account

батырманың нұры

href="#myModal"

Мен url-ды көргім келеді

localhost:8080/#/account#myModal

Алайда, менің көргенім

localhost:8080/#myModal

Мен бұл мәселемен байланысты екенін білмеймін.

Алдын-ала рақмет!

EDIT 1

Мен басқа лауазымды көрдім, бұл Stewie туралы айтқан. Ол html5mode және hashbang түсіндіреді, бірақ бұл менің проблемамды шешпейді.

Html5mode қоюға тырыстым және батырманы басқан кезде ол әлі бетті қайта жүктейді

25
бет ішіндегі навигацияның айқын және анықталған семантикалық рөлі болғанда неге қолданасыз? Бұл ресурс сілтемесі емес, жай ғана қолдануға болмайды?
қосылды автор Mike 'Pomax' Kamermans, көзі
data-target опцияларына қарап көрдіңіз бе? Осылайша, сіз бұрыштардан граваны таңдауға мүмкіндік бере аласыз.
қосылды автор Sherbrow, көзі

7 жауаптар

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

Орналасқан жерді қайта жазуға жол бермеу үшін, бұл жүктеу жолдарына target = _self қосыңыз.

So instead of you need

24
қосылды
wow great tip ustun! Бұл бар екенін білмедім
қосылды автор SM3RKY, көзі
Қарапайым және тиімді! Шебер сияқты жұмыс істеңіз, рахмет !!
қосылды автор AlvaroAV, көзі
thanks @ustun менің күнімді сақтадыңыз.
қосылды автор Satish Singh, көзі

Бұрыштағы hashbang маршруттау үшін пайдаланылады. мұнда

Сондай-ақ,

бұрыштық UI жүктеу бумасын қараңыз.

Тұрақты Boostrap ойдағыдай салынбаған, сондықтан бұрышпен сәйкес келмейтін бірнеше нәрсе бар. Сондықтан команда Boostrap позициясын бұрыштық директиваларға айналдырып, сізге бұрыштың ng - функцияларын толық пайдалану мүмкіндігін берді (бұл жай ғана 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>

Бұл бұрыштық жол (бұрыштық UI Bootstrap қалай жұмыс істейді).

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

Save
9
қосылды
қосылды автор duckegg, көзі

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-ды қосымшаның деңгейінің реттегішінің үлгісіне айналдырдым және Карлос В. сияқты, $ location.path() дегенді жаңарту үшін ng-батырмасын баса аласыз.

Here's a fiddle link

Ең оңтайлы шешім бола алмайды. Бұл көмектеседі деп үміттенемін.

1
қосылды

Осыған ұқсас нәрсені ur JS пайдаланыңыз

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

    e.preventDefault();
});

Тек 'a' үшін сынып жасаңыз, әйтпесе сіз мұны барлық адамдарға жасай аласыз.

0
қосылды