Öffnen Sie Links in einem neuen Fenster mit AngularJS

Gibt es eine Möglichkeit, AngularJS mitzuteilen, dass Links in neuen Fenstern geöffnet werden sollen, wenn der Benutzer darauf klickt?

Mit jQuery würde ich Folgendes tun:

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

Gibt es ein Äquivalent zu AngularJS?

Hier ist eine Direktive, die target="_blank"allen <a>Tags mit einem hrefAttribut hinzugefügt wird. Das heißt, sie werden alle in einem neuen Fenster geöffnet. Denken Sie daran, dass Anweisungen in Angular für jede Dom-Manipulation / jedes Dom-Verhalten verwendet werden. Live-Demo (klicken).

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

Hier ist das gleiche Konzept, das weniger invasiv (damit nicht alle Links betroffen sind) und anpassungsfähiger ist. Sie können es für ein übergeordnetes Element verwenden, damit es alle untergeordneten Links beeinflusst. Live-Demo (klicken).

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

Alte Antwort

Es scheint, als würden Sie nur "target="_blank"für Ihr <a>Tag verwenden. Hier sind zwei Möglichkeiten:

<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');
  };
});

Live-Demo hier (klicken).

Hier sind die Dokumente für $window: http://docs.angularjs.org/api/ng.$window

Sie könnten nur verwenden window, aber es ist besser, die Abhängigkeitsinjektion zu verwenden und $windowzu Testzwecken Winkel zu übergeben.

Für mich geht das. Injizieren Sie den $windowService in Ihren Controller.

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

Sie können verwenden:

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

Dies ist der Code Ihrer Schaltfläche

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

Fügen Sie im Controller einfach diese Funktion hinzu.

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

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

$scope.showaddnewuserpage = function () {

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

});

@ m59 Richtlinien für Arbeit ng-bind-html müssen Sie nur noch warten , $viewContentLoadedbis Ende

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();

  };
});

Ich habe einen kleinen Kern geschrieben, der meiner Meinung nach für jeden sehr hilfreich sein kann, der nach einer Lösung für dieses Problem sucht: externer Link

Es fügt Ankerelementen target="_blank"Attribute hinzu , die mit einer anderen als der aktuellen Domäne verknüpft sind. Sie können es nach Belieben patchen.

Ich habe viele Links durchgesehen, aber diese Antwort hat mir sehr geholfen:

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

** Daten sind absolute URLs, die Sie treffen.