web-dev-qa-db-fra.com

Comment ouvrir un nouvel onglet dans le navigateur en utilisant $ location, angular?

J'ai le contrôleur 'reportCtrl' et le HTML qui représente 6 tables avec des données et seulement plusieurs lignes que je montre à la fois.

app.js 

var appReport = angular.module('myAppReport', []);

appReport.config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/showreport', {templateUrl: 'app/reports/reportsView.html', controller: 'reportCtrl'});
            $routeProvider.when('/showreport/:type', {templateUrl: 'app/reports/reportsView.html', controller: 'reportCtrl'});

Chaque table a un bouton qui, au clic, devrait ouvrir un nouvel onglet dans le navigateur avec la table étendue:

scope.onClick = function(path){
    var real_path = $location.path() + '/' + path + '/';
    $location.path( real_path );
    // $window.open($location.path()); // doesn't work
};

Par exemple, j'ai l'URL de la vue racine:

http://dev.test.com/reports/date/#/showreport

Maintenant, après avoir appuyé sur le bouton, je veux créer:

http://dev.test.com/reports/date/#/showreport/table_name

et ouvrez-le dans un nouvel onglet. Comme vous le voyez, j'ai essayé $window.open($location.path()); mais cela ne fonctionne pas, rien ne se passe.

Merci, 

angularjs
25
snaggs

Vous ouvrez une nouvelle fenêtre en utilisant une autre fonction qui pourrait confondre Angular.

Essayez de passer la chaîne dans $window.open(real_path) où real_path est une chaîne contenant le chemin que vous souhaitez parcourir.

23
Rayton Kiwelu

Si vous voulez ouvrir une page angulaire dans un nouvel onglet avec ctrl + clic ou dans le même onglet, essayez ceci: -

HTML: 

<a ng-click="navigationUrl($event)">My Link</a>

JS: 

    var navigationUrl = function (event) {
            if (event.ctrlKey) {
                window.open(url, '_blank'); // in new tab
            } else {
                $location.path(url); // in same tab
            }
        };
17
Rubi saini

Une autre option consiste à utiliser ng-href

HTML:

 <a  ng-href="#/courses/{{employee.courseId}}/employees/{{employee.id}}" 
      target="_blank"> {{employee.employeeNumber}}
 </a>

Où l'URL est basé sur l'endroit où vous souhaitez rediriger

4
Rama

Pour ouvrir une nouvelle vue dans une nouvelle fenêtre, exécutez le code suivant:

window.open($location.$$absUrl.replace($location.$$path,NEW_PATH), '_blank');
1
Amalraj K R

Bien que la réponse la plus votée ici puisse fonctionner pour la plupart des scénarios, je souhaite ajouter la façon dont j'ai trouvé comment atteindre l'objectif souhaité par OP (j'avais également besoin de cela):

var viewPath = '/InsideMyView';
var currentPath = window.location.href.substr(0, window.location.href.indexOf('#') + 1);
var fullPath = currentPath + viewPath;
$window.open(fullPath, '_blank');

Explication : Il vous suffit d'obtenir l'URL racine de votre application. Vous pouvez utiliser # dans l'URL (ajoutée par un angle), puis concaténer le chemin d'accès à la vue pour obtenir l'URL complète.

1
Alisson

Ouverture de la vue dans un nouvel onglet avec paramètre angulaire

   <a  target="_blank" class="btn" data-ng-href="@Url.Action("Hotel", "Home")?hotelCode={{hotel.code}}"> Click Hear</a>
0
sanjeewa

Cela a fonctionné pour moi.

HTML: <div ng-click="OpenBrowserInNewTab(someKeyValue)"</div>Click Me </div>

Le controlle:

`$scope.OpenBrowserInNewTab = (someKeyValue) ->
    tabWindowId = window.open('/abcdef/ghijk/' + someKeyValue + '', _blank')

    $http.post("/abcdef/ghijk/#someKeyValue", data).then (response) ->
        tabWindowId.location.href = response.headers('Location')
        return
    return`
0
Timothy Ingledue