javascript - bootstrap - angularjs node js example

href provoca la recarga involuntaria de páginas con Angularjs y Twitter Bootstrap

Question

Estoy trabajando en un proyecto que utiliza Angularjs y Twitter Bootstrap.

Bootstrap usa # para alternar componentes como popover, modal, etc., por ejemplo:

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

El problema es que al hacer clic en el botón con dicho atributo href, se produce la recarga de la página completa, lo que significa que todo en la página actual se pierde. ¿Hay alguna manera de prevenir esto?

alguna información extra :

Cuando me coloco en el botón, la URL es rara. por ejemplo, la url de mi página actual es

localhost:8080/#/account

el botón de href es

href="#myModal"

Espero ver url

localhost:8080/#/account#myModal

Sin embargo, lo que veo es

localhost:8080/#myModal

No estoy seguro de si esto está relacionado con mi problema.

¡Gracias por adelantado!

EDITAR 1

He visto el otro post del que Stewie habló. Explica html5mode y hashbang en angularjs, pero realmente no resuelve mi problema.

Intenté poner html5mode, y todavía vuelve a cargar la página cuando hago clic en el botón

Answer 1

Aquí hay una solución más sencilla: cómo evitar el redireccionamiento de <a href="#something"> en Angular Js1.2

Solo agrega target="_self" a tus enlaces

Answer 2

Continúe y realice el cambio a continuación, de poner javascript: void (0) en lugar de #myModal para href. Usa Javascript para activar tu apertura modal, poniendo un evento de clic.

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

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

Answer 3

El hashbang en Angular se utiliza para routing . Mire el tutorial para una visión más profunda de cómo funciona here .

También deberías echar un vistazo a Angular UI Bootstrap .

Regular Boostrap no se construyó pensando en Angular, así que hay algunas cosas que no están en línea con Angular. Así que el equipo decidió incorporar a Boostrap a las directivas de Angular, lo que le brinda la capacidad de usar completamente las características ng- de Angular (que no podría hacer fácilmente con solo Boostrap regular).

Debido a la forma en que funciona el enrutamiento, no creo que pueda hacer lo que quiere, y no debería hacerlo. Ya que está utilizando <a> como un botón, <a> en un botón normal y agregue un ng-click :

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

Esta es la forma angular (y cómo funciona Angular UI Bootstrap).

Por último, en Angular, la <a> es una directiva aquí , por lo que si desea evitar el clic predeterminado, deje href="" :

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

Answer 4

Esto se debe a la reescritura del enlace HTML de Angular, que se explica here .

Para evitar la reescritura de la ubicación, agregue target=_self a esos enlaces de arranque.

Así que en lugar de <a href="#myModal"> necesita <a href="#myModal" target="_self">

Answer 5

Resolví: Simplemente simplemente cambie el atributo HREF por el atributo 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>

Answer 6

Tuve problemas similares, recarga de página completa vs solo cambio de vista.

Debido a que las aplicaciones Angular son SAP, solo actualizamos lo que viene después del nombre de host / # /.

Hago una instancia de un SuperController, el tipo de controlador de nivel de aplicación y, como dijo Carlos V, puedes usar ng-click en lugar de href para actualizar $location.path() .

Aquí hay un link violín

Podría no ser la solución más óptima. Espero eso ayude.

Answer 7

Use algo como esto en ur js

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

    e.preventDefault();
});

Solo asegúrate de hacer una clase para tu ''a'', de lo contrario, lo harás con todos los a.