html - ¿Cómo permitir ''Abrir en una nueva pestaña'' al usar ng-click?

ng-click angularjs

Question

Tengo una tabla en HTML y cada fila lleva a una página diferente, con más detalles sobre esa fila. Pero como estoy usando angularjs, con ng-click no puedo hacer clic derecho en esta fila y seleccionar "abrir en una nueva pestaña". ¿Hay alguna manera de resolverlo?

¡Gracias por adelantado!

Answer 1

Dentro de su función ng-click puede llamar a window.open(url, ''_blank'') sin embargo, como advertencia , esto dependerá del navegador y la configuración actual.

En algunos casos, esto se abrirá en una ventana emergente y en otros casos se abrirá en una nueva pestaña. No hay forma de forzar ninguno de los dos comportamientos, ya que el javascript es independiente del navegador, simplemente ha solicitado una nueva ventana y depende del navegador el decidir cómo implementarlo. Vea aquí para una discusión sobre forzar una pestaña o ventana

Sin embargo, la única manera de obtener esa opción de clic derecho o ctrl + clic para abrir en una nueva pestaña es si el navegador ve una etiqueta <a> . De lo contrario no lo trata como un enlace.

Answer 2

Si desea generar su href forma dinámica en función de alguna condición, puede configurar su href en el evento ng-mousedown y luego puede realizar cualquier evento como open link in new tab , open link in new window y click .

HTML:

<a href="javascript:void(0)" ng-mousedown="openDetailView($event, userRole)">{{label}}</a>

JS:

 $scope.openDetailView = function (event, userRole) {
if(userRole == ''admin'') {
jQuery(event.target).attr(''href'', ''admin/view'');
} else {
jQuery(event.target).attr(''href'', ''user/view'');
}
};

Answer 3

Tienes que usar el elemento de anclaje dentro de la fila de la tabla.

HTML

<tr>
<a ng-href="dynamic url" ng-click="openItem($event)">Open the item</a>
</tr>

Controlador

$scope.openItem = function (event) {
event.preventDefault();
// code to open a item
}

Answer 4

Si es posible, debes convertir tu elemento en un elemento de anclaje.

<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>

El navegador interpretará el elemento como un enlace y, por lo tanto, le dará el menú desplegable correcto. Tenga en cuenta que también debe tener el valor href correcto para abrir en una nueva pestaña.

EDITAR: recomendaría esta pregunta si desea una respuesta más detallada sobre cómo solucionar este tipo de comportamiento utilizando JQuery.