javascript - new - angularjs documentation

Abrir enlaces en una nueva ventana usando AngularJS

Question

¿Hay alguna manera de decirle a AngularJS que quiero que los enlaces se abran en ventanas nuevas cuando el usuario hace clic en ellos?

Con jQuery, haría esto:

jQuery("a.openInNewWindow").click( function() {
    window.open(this.href);
    return false;
})

¿Hay un equivalente con AngularJS?

Answer 1

Aquí hay una directiva que agregará target="_blank" a todas las etiquetas <a> con un atributo href . Eso significa que todos abrirán en una nueva ventana. Recuerde que las directivas se utilizan en Angular para cualquier manipulación / comportamiento dom. Demostración en vivo (click).

app.directive(''href'', function() {
  return {
    compile: function(element) {
      element.attr(''target'', ''_blank'');
    }
  };
});

Aquí está el mismo concepto hecho menos invasivo (por lo que no afectará a todos los enlaces) y más adaptable. Puede usarlo en un elemento primario para que afecte a todos los enlaces secundarios. Demostración en vivo (click).

app.directive(''targetBlank'', function() {
  return {
    compile: function(element) {
      var elems = (element.prop("tagName") === ''A'') ? element : element.find(''a'');
      elems.attr("target", "_blank");
    }
  };
});

Vieja respuesta

Parece que usaría "target="_blank" en su etiqueta <a> . Aquí hay dos maneras de hacerlo:

<a href="//facebook.com" target="_blank">Facebook</a>
<button ng-click="foo()">Facebook</button>

JavaScript:

var app = angular.module(''myApp'', []);

app.controller(''myCtrl'', function($scope, $window) {
  $scope.foo = function() {
    $window.open(''//facebook.com'');
  };
});

Demostración en vivo aquí (click).

Aquí están los documentos para $window : http://docs.angularjs.org/api/ng.$window

Podrías usar window , pero es mejor usar la inyección de dependencia, pasando $window angular para fines de prueba.

Answer 2

Escribí una pequeña idea que creo que puede ser muy útil para cualquiera que busque una solución a ese problema: enlace externo

Lo que hace es agregar atributos target="_blank" para anclar elementos que se vincularían a un dominio diferente al actual. Puedes aplicarle un parche a lo que mejor le parezca.

Answer 3

Esto funciona para mi. Inyecte el servicio $window en su controlador.

$window.open("somepath/", "_blank")

Answer 4

He revisado muchos enlaces, pero esta respuesta me ayudó mucho:

$scope.redirectPage = function (data) { $window.open(data, "popup", "width=1000,height=700,left=300,top=200"); };

** los datos serán la URL absoluta a la que está llegando.

Answer 5

Las directivas @ m59 funcionarán para ng-bind-html, solo tiene que esperar a que $viewContentLoaded termine

app.directive(''targetBlank'', function($timeout) {
  return function($scope, element) {
    $scope.initializeTarget = function() {
      return $scope.$on(''$viewContentLoaded'', $timeout(function() {
        var elems;
        elems = element.prop(''tagName'') === ''A'' ? element : element.find(''a'');
        elems.attr(''target'', ''_blank'');
      }));
    };
    return $scope.initializeTarget();

  };
});

Answer 6

este es el código de tu botón

<a href="AddNewUserAdmin" 
   class="btn btn-info " 
   ng-click="showaddnewuserpage()">
  <span class="glyphicon glyphicon-plus-sign"></span> Add User</a>

en el controlador simplemente agrega esta función.

 var app = angular.module(''userAPP'', []);

app.controller(''useraddcontroller'', function ($scope, $http, $window) {

$scope.showaddnewuserpage = function () {

    $window.location.href = (''/AddNewUserAdmin'');
}

});

Answer 7

puedes usar:

$window.open(url, windowName, attributes);