Angularjs $ state 새 탭에서 링크 열기


81

$ state.go 함수를 사용하여 "새 탭에서 링크 열기"기능을 구현하려고합니다. 다음과 같은 smth가 있으면 멋질 것입니다.

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

AngularJS를 사용하여 수행 할 수있는 방법이 있습니까?


다음 코드로 해결했다는 질문의 편집은 중복되는 것 같습니다. 즉. 그것은 당신이 수락 한 대답으로 그것을 선택했다는 사실에 의해 암시됩니다.
Adam Zerner 2015

수정, 편집 제거.
Alex Arvanitidis 2015 년

당신은 여기에 답변을 찾을 수 있습니다 새 탭에서 AngularJS와 $ 상태 링크 열기
Dalorzo

답변:


153

업데이트 : 좋아, 방금 다음 코드를 사용하여 해결했습니다.

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

18
모범 사례를위한 $ window가 아니어야합니까?
tsuz

3
매개 변수를 새 창으로 전달할 수 있습니까?
hjl

예 그들이 전달됩니다 @elaijuh
마누엘 디 Iorio

@alex 정의 된 창을 대상으로하고 싶어서 window.open (url, 'myWindow'); 하지만 작동하지 않습니다. 도움이 필요하세요?
mhd

1
이런 방식으로 자바 스크립트에서 링크를 열고 기본 URL이 변경되면 브라우저가 사이트가 팝업을 열려고 시도했다는 메시지를 차단할 가능성이 있지만 사용자가 웹 사이트를 수락하거나 승인하면 작업.
GabLeRoux

55

나는 이것을 시도했다-분명히 다음 target="_blank"과 함께 작업을 추가 합니다 ui-sref.

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

컨트롤러에 코드를 추가하는 수고를 덜고 일반 링크와 마찬가지로 호버시 URL을 제공합니다. 윈윈!


3
이것은 <a>에서만 작동합니다. "target"은 분명히 다른 요소에서 작동하지 않습니다. 예 : <button ui-sref = "routeHere"target = "_ blank"> A 링크 </ button>
Luis

2
@Luis 버튼 그래서 그래 대상 속성을 해달라고 실 거예요 작업
GERL

1
@Luis 아마도 버튼 관련 클래스와 역할을 앵커 태그의 버튼으로 사용하여 버튼처럼 보이게 할 수 있습니다. 예 :<a ui-sref="routeHere" target="_blank" class="btn btn-primary" role="button">A Link</a>
Safwan

7

비슷한 문제가 발생했습니다. 이전 답변에서 아무것도 효과가 없으면 이것을 시도하십시오.

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

그러니까 기본적으로 추가하지 않고, 로컬 호스트에서 작업하는 동안 '#'단지로 리디렉션 된

localhost / 미리보기

, 대신에

localhost / Project_Name / # / preview

나는 여기에서 데이터를 전달하는 것이 아니라 새 탭에서 $ state를 여는 것입니다.


6

앱이 하위 폴더에있는 경우 localhost에서 작동하지 않을 수 있습니다. 사실 같은 문제가있었습니다.

나는 온라인으로 시도했고 다음을 사용하여 예상대로 작동했습니다.

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

4

내가 찾은 가장 좋은 대답은 ui.router를 확장하는 것이 었습니다. 기능이 빌드에 존재하지 않기 때문입니다. 자세한 내용은 여기에서 찾을 수 있습니다.

Angular 1.x ui-router의 $ state.go 확장

그러나 다음은 app.js 또는 각도 앱 초기화 파일에 추가해야하는 작업에 대한 간단한 설명입니다.

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

코드에서

다음을 수행 할 수 있습니다.

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

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

이 코드는 내 문제를 해결했습니다.

앵커 태그에서 사용하십시오.


2

이 시도!

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


이것은 부적절합니다. 제가 호출하는 경로에 매개 변수를 추가해야한다고 말한 것이 아니라이 경로를 새 탭에서 열고 싶다고 말했습니다.
알렉스 Arvanitidis

이것은 많은 사람들에게 관련이있을 수 있습니다. 방금 사용했습니다. 여기서 언급해야 할 한 가지는 매개 변수 이름은 작은 따옴표로 묶어야한다는 것입니다. <a ui-sref="routeHere({'parameter': vm.parameter})" target="_blank"> </a>
Sudheer Muhammed
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.