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

Odpowiedzi:

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