angularjs - escape - ¿Cómo prevenir un defecto en las etiquetas de anclaje?

ng-if

Question

Digamos que tengo una etiqueta de anclaje como

<a href="#" ng-click="do()">Click</a>

¿Cómo puedo evitar que el navegador navegue a # en AngularJS ?

Answer 1

Aunque Renaud dio una gran solución.

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

Personalmente descubrí que también necesitas $ event.stopPropagation () en algunos casos para evitar algunos de los efectos secundarios

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

será mi solución

Answer 2

De acuerdo con los documentos para ngHref , debería poder dejar de href o hacer href = "".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don''t reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don''t reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don''t reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

Answer 3

Entonces, leyendo estas respuestas, @Chris todavía tiene la respuesta más "correcta", supongo, pero tiene un problema, no muestra el "puntero" ...

Así que aquí hay dos formas de resolver este problema sin necesidad de agregar un cursor: estilo de puntero:

1. Use javascript:void(0) lugar de # :

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>

2. Use $event.preventDefault() en la directiva ng-click (para no eliminar su controlador con referencias relacionadas con DOM):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>

Personalmente prefiero lo primero a lo segundo. javascript:void(0) tiene otros beneficios que se discuten aquí . También hay una discusión de "JavaScript no intrusivo" en ese enlace que es terriblemente reciente y no necesariamente se aplica directamente a una aplicación angular.

Answer 4

Esto es lo que siempre hago. ¡Funciona de maravilla!

<a href ng-click="do()">Click</a>

Answer 5

HTML

aquí pure angularjs: cerca de la función ng-click puedes escribir la función preventDefault () separando el punto y coma

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

JS

$scope.do = function() {
    alert("do here anything..");
}

(o)

Usted puede proceder de esta manera, esto ya se ha discutido aquí.

HTML

<a href="#" ng-click="do()">Click me</a>

JS

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

Answer 6

La forma más segura de evitar eventos en un href sería definirlo como

<a href="javascript:void(0)" ....>

Answer 7

La solución más fácil que he encontrado es esta:

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

Answer 8

Lo que debes hacer, es omitir el atributo href completo.

Si observa el código fuente de la directiva de a elemento (que forma parte del núcleo angular), indica en la línea 29 - 31:

if (!element.attr(href)) {
    event.preventDefault();
}

Lo que significa que Angular ya está resolviendo el problema de los enlaces sin un href. El único problema que todavía tiene es el problema de css. Aún puede aplicar el estilo del puntero a los anclajes que tienen ng clics, por ejemplo:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

Por lo tanto, incluso podría hacer que su sitio sea más accesible marcando enlaces reales con un estilo sutil y diferente, y luego enlaces que realizan funciones.

¡Feliz codificación!

Answer 9

Me encontré con este mismo problema cuando uso los anclajes para un menú desplegable angular. La única solución que encontré que evitó los efectos secundarios no deseados (es decir, que el menú desplegable no se cerró debido al uso de preventDefault ()) fue usar lo siguiente:

 <a href="javascript:;" ng-click="do()">Click</a>

Answer 10

Muchas respuestas parecen ser excesivas. PARA MI, esto funciona.

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>

Answer 11

Necesito la presencia del valor del atributo href para la degradación (cuando js está desactivado), por lo que no puedo usar el atributo href vacío (o "#"), pero el código anterior no funcionó para mí, porque necesito un evento ( e) variable. Creé mi propia directiva:

angular.module(''MyApp'').directive(''clickPrevent'', function() {
  return function(scope, element, attrs) {
    return element.on(''click'', function(e) {
      return e.preventDefault();
    });
  };
});

En HTML:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

Answer 12

O si necesita en línea, puede hacer esto:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

Answer 13

Prefiero usar directivas para este tipo de cosas. Aquí un ejemplo

<a href="#" ng-click="do()" eat-click>Click Me</a>

Y el código de directiva para eat-click :

module.directive(''eatClick'', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

Ahora puede agregar el atributo de eat-click a cualquier elemento y obtendrá preventDefault() ''ed automagically.

Beneficios:

1. No tiene que pasar el objeto de $event feos en su función do() .
2. Su controlador es más comprobable por unidad porque no necesita apagar el objeto $event

Answer 14

Pruebe esta opción que ya veo que aún no se encuentra en la lista:

<a href="" ng-click="do()">Click</a>

Answer 15

Puede deshabilitar la redirección de URL dentro de $ location''s Html5Mode para lograr el objetivo. Puedes definirlo dentro del controlador específico usado para la página. Algo como esto:

app.config([''$locationProvider'', function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false,
        requireBase: false
    });
}]);

Answer 16

Puede pasar el objeto $ event a su método y llamar a $event.preventDefault() para que no se produzca el procesamiento predeterminado:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

Answer 17

Puedes hacer lo siguiente

1.Elimine el atributo href de la etiqueta anchor ( a )

2.Ponga el cursor del puntero en css para hacer clic en los elementos

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

Answer 18

Tomando prestada la respuesta del teniente de tenis. Me gusta que no tienes que crear una directiva personalizada para agregar en todos los enlaces. Sin embargo, no pude conseguir que su trabajo en IE8. Esto es lo que finalmente me funcionó (usando angular 1.0.6).

Tenga en cuenta que ''bind'' le permite usar jqLite proporcionado por angular, por lo que no es necesario envolverlo con jQuery completo. También se requiere el método stopPropogation.

.directive(''a'', [
    function() {
        return {
            restrict: ''E'',
            link: function(scope, elem, attrs) {

                elem.bind(''click'', function(e){
                    if (attrs.ngClick || attrs.href === '''' || attrs.href == ''#''){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

Answer 19

Una alternativa podría ser:

<span ng-click="do()">Click</span>

Answer 20

Ya que estás haciendo una aplicación web, ¿por qué necesitas enlaces?

¡Cambia tus anclas por botones!

<button ng-click="do()"></button>

Answer 21

Yo iría con:

<a ng-click="do()">Click</a>

• ¡De acuerdo con los documentos, debería poder salir de href y luego Angular manejará el valor predeterminado de prevención para usted!

Todo lo que he evitado por defecto ha sido confuso para mí, así que he creado un JSFiddle ilustrar cuándo y dónde Angular está impidiendo el default .

El JSFiddle está usando una directiva de Angular, por lo que debería ser exactamente la misma. Puede ver el código fuente aquí: un código fuente de etiqueta

Espero que esto ayude a aclarar algunos.

Me hubiera gustado publicar el documento en ngHref pero no puedo debido a mi reputación.

Answer 22

si nunca quiere ir a href ... debe cambiar su marca y usar un botón no una etiqueta de anclaje porque semánticamente no es un ancla ni un enlace. A la inversa, si tiene un botón que hace algunas comprobaciones y luego lo redirige, debe ser una etiqueta de enlace / ancla y no un botón ... para fines de SEO, así como para probar [insertar el conjunto de pruebas aquí].

para los enlaces que solo desea redireccionar condicionalmente, como pedirle que guarde los cambios, o que reconozca el estado sucio ... debe usar ng-click = "someFunction ($ event)" y en alguna función de su validationError preventDefault y o stopPropagation.

También porque puedes no significa que debas . javascript: void (0) funcionó bien en el día ... pero debido a los infames hackers / crackers, los navegadores marcan las aplicaciones / sitios que usan javascript dentro de un href ... no hay razón para ducktype arriba.

Es 2016, ya que 2010 no debe ser motivo para utilizar enlaces que actúen como botones ... si aún tiene que admitir IE8, debe volver a evaluar su lugar de negocios.

Answer 23

si sigue siendo relevante:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

Answer 24

ACTUALIZACIÓN : Desde entonces he cambiado de opinión sobre esta solución. Después de más desarrollo y tiempo dedicado a esto, creo que una mejor solución a este problema es hacer lo siguiente:

<a ng-click="myFunction()">Click Here</a>

Y luego actualice su css para tener una regla adicional:

a[ng-click]{
    cursor: pointer;
}

Es mucho más simple y proporciona la misma funcionalidad exacta y es mucho más eficiente. Espero que pueda ser útil para cualquier otra persona que busque esta solución en el futuro.

La siguiente es mi solución anterior, que voy a dejar aquí solo para fines heredados:

Si tiene mucho este problema, una directiva simple que solucionaría este problema es la siguiente:

app.directive(''a'', function() {
    return {
        restrict: ''E'',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '''' || attrs.href === ''#''){
                elem.on(''click'', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

Comprueba todas las etiquetas de anclaje ( <a></a> ) para ver si su atributo href es una cadena vacía ( "" ) o un hash ( ''#'' ) o si hay una asignación de ng-click . Si encuentra alguna de estas condiciones, detecta el evento y evita el comportamiento predeterminado.

El único inconveniente es que ejecuta esta directiva para todas las etiquetas de anclaje. Entonces, si tiene muchas etiquetas de anclaje en la página y solo desea evitar el comportamiento predeterminado para un pequeño número de ellas, esta directiva no es muy eficiente. Sin embargo, casi siempre quiero evitar el preventDefault , así que uso esta directiva en todas mis aplicaciones AngularJS.

Answer 25

/* NG CLICK PREVENT DEFAULT */

app.directive(''ngClick'', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

Answer 26

ng-click="$event.preventDefault()"