Angularjs $ state otwórz link w nowej karcie

81

Próbuję zaimplementować funkcję „otwórz łącze w nowej karcie” przy użyciu funkcji $ state.go. Byłoby wspaniale, gdyby było coś takiego:

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

Czy można to zrobić za pomocą AngularJS?

angularjs angular-ui-router angular-ui

— Alex Arvanitidis
źródło

Edycja w pytaniu mówiąca, że rozwiązałeś go za pomocą następującego kodu, wydaje się zbędna. To znaczy. wynika to z faktu, że wybrałeś ją jako zaakceptowaną odpowiedź.

— Adam Zerner

Naprawiono, usunięto edycję.

— Alex Arvanitidis

Możesz znaleźć odpowiedź tutaj Angularjs $ state otwórz link w nowej karcie

— Dalorzo

153

Aktualizacja: OK, właśnie rozwiązałem to za pomocą następującego kodu:

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');

— Alex Arvanitidis
źródło

18

Czy nie powinno to być okno $ window dla najlepszych praktyk?

— tsuz

3

Czy na pewno parametr można przekazać do nowego okna?

— hjl

Tak @elaijuh, zostaną zdane

— Manuel Di Iorio

@alex chcę kierować reklamy na zdefiniowane okno, więc spróbowałem window.open (url, 'myWindow'); ale to nie działa. Jakaś pomoc?

— mhd

1

Zwróć uwagę, że jeśli otworzysz link z javascript w ten sposób i zmieni się podstawowy adres URL, prawdopodobnie przeglądarka go zablokuje, mówiąc, że witryna próbowała otworzyć wyskakujące okienko, ale jeśli użytkownik zaakceptuje lub autoryzuje twoją witrynę, aby to zrobić, praca.

— GabLeRoux

55

Właśnie tego spróbowałem - najwyraźniej dodawanie target="_blank"działa z ui-sref:

<a ui-sref="routeHere" target="_blank">A Link</a>

Oszczędza kłopot z dodawaniem kodu do kontrolera i podaje adres URL po najechaniu kursorem, tak jak w przypadku każdego zwykłego łącza. Win-win!

— Patrick Calulo
źródło

3

działa to tylko na <a>. „target” najwyraźniej nie działa na innych elementach. tj. <button ui-sref = "routeHere" target = "_ blank"> Link </button>

— Luis

2

@Luis Przyciski nie mają atrybutu Target, więc tak, to nie zadziała

— gerl

1

@Luis Może możesz użyć klas związanych z przyciskami i roli jako przycisku dla tagu kotwicy, aby wyglądał jak przycisk. Np .:<a ui-sref="routeHere" target="_blank" class="btn btn-primary" role="button">A Link</a>

— Safwan

7

Miałem podobny problem, spróbuj tego, jeśli nic z poprzednich odpowiedzi nie działa.

var url = '#' + $state.href('preview');
window.open(url,'_blank');

Zasadniczo podczas pracy na hoście lokalnym, bez dołączania '#'go, było po prostu przekierowaniem do

localhost / preview

, zamiast

localhost / nazwa_projektu / # / preview

Nie mówię tutaj o przekazywaniu danych, tylko po to, aby otworzyć $ state w nowej karcie.

— Deepak Bandi
źródło

6

Może nie działać na hoście lokalnym, jeśli Twoja aplikacja znajduje się w podfolderze. W rzeczywistości miałem ten sam problem.

Próbowałem online i działało zgodnie z oczekiwaniami, używając:

<a ui-sref="routeHere" target="_blank">Link</a>

— FrancescoMussi
źródło

4

ui-sref="routeHere" href=""target="_blank"

ten kod rozwiązał mój problem.

użyj tego w tagu kotwicy.

— Zubair sadiq
źródło

4

Najlepszą odpowiedzią, jaką znalazłem, było rozszerzenie ui.router, ponieważ ta funkcja nie istnieje w wersji wbudowanej. Pełne szczegóły można znaleźć tutaj:

Rozszerzanie pliku $ state.go w Angular 1.x ui-router

Jednak tutaj jest moje krótkie wyjaśnienie, co należy zrobić, dodaj to do pliku app.js lub pliku init aplikacji kątowej:

angular.module("AppName").config(['$provide', function ($provide) {
    $provide.decorator('$state', ['$delegate', '$window',
        function ($delegate, $window) {
            var extended = {
                goNewTab: function (stateName, params) {
                    $window.open(
                        $delegate.href(stateName, params, { absolute: true }), '_blank');
                }
            };
            angular.extend($delegate, extended);
            return $delegate;
        }]);
}]);

W twoim kodzie

Będziesz mógł:

$state.goNewTab('routeHere', { parameter1 : "parameter"});

— Dalorzo
źródło

2

Spróbuj tego!

<a ui-sref="routeHere({parameter: vm.parameter})" target="_blank"></a>

— Miko
źródło

To nie ma znaczenia, nie powiedziałem, że muszę dodawać parametry do trasy, którą dzwonię, powiedziałem, że chcę otworzyć tę trasę w nowej karcie.

— Alex Arvanitidis

Może to mieć znaczenie dla wielu osób. Właśnie tego użyłem. Należy tu wspomnieć, że nazwa parametru powinna być ujęta w pojedyncze cudzysłowy. <a ui-sref="routeHere({'parameter': vm.parameter})" target="_blank"> </a>

— Sudheer Muhammed