각도 Ui-router 링크가 앱에서 벗어났지만 동일한 도메인에 있음

각도 Ui-router 링크가 앱에서 벗어났지만 동일한 도메인에 있음

각진 앱에서 ui-router를 사용하려고 합니다.

기본 URL은 "/segments"이며 기본 태그를 사용하여 정의합니다.

<base href="/segments" />

라우팅 설정은 다음과 같습니다.

var base = "/segments"

$stateProvider
  .state('list', {
    url: base,
    controller: 'FilterLestCtrl',
    templateUrl: '/segments/partial?partial=list'
  })

  .state('new', {
    url: base + '/new',
    data: {
      mode: 'new'
    },
    controller: 'SegmentFormCtrl',
    templateUrl: '/segments/partial?partial=edit'
  })

  .state('edit', {
    url: base + '/:id/edit',
    data: {
      mode: 'edit'
    },
    controller: 'SegmentFormCtrl',
    templateUrl: '/segments/partial?partial=edit'
  });

$locationProvider.html5Mode(true).hashPrefix('!');

링크 태그를 클릭하면 앱에서 사이트의 다른 리소스로 이동할 수 없습니다.클릭해서 태그 붙이기

<a class="" href="/widgets">Widgets</a>

URL이 변경되어도 아무 일도 일어나지 않았습니다.

질문:ui-router를 사용하여 사이트의 다른 페이지에 대한 외부 링크를 어떻게 처리합니까?

이는 도움이 될 수 있습니다.angular.js 링크 동작 - 특정 URL에 대해 딥 링크를 사용하지 않도록 설정합니다.

요약하면 라우팅 목적으로 링크를 무시하도록 Angular에게 지시할 수 있습니다.target="_self"그러면 브라우저가 Angular에 의해 방해받지 않고 링크를 처리할 수 있습니다.예를 들어 다음과 같습니다.

<a href="/my-non-angular-link" target="_self">My Non-Angular Link</a>

이 접근법은 Angular에서 처리해서는 안 된다는 것을 미리 알고 있는 링크에 대해 유효합니다.

Ui-Router가 Router를 트리거하고 있습니다.otherwise()URL을 기존의 상태 목록과 대조하지 못했기 때문에 URL에 대한 응답입니다.

브라우저에 URL 업데이트가 표시되지만 Javascript 코드에서 오류가 처리되지 않았기 때문에 아무 일도 일어나지 않습니다.

이와 같이 일치하지 않는 상태의 핸들러를 추가할 수 있습니다.

var stateHandler = function($urlRouterProvider)
{
    $urlRouterProvider.otherwise(function($injector, $location)
     {
         window.location = $location.absUrl();
     });
};

YourAngularApp.config(['$urlRouterProvider',stateHandler]);

ui-router가 상태와 일치하지 않으면otherwise()콜백그런 다음 브라우저를 수동으로 해당 URL로 이동할 수 있습니다.

편집: 경고, URL이 잘못된 루트를 가진 Angular 경로일 경우 무한 리다이렉트루프가 발생합니다.

단일 요소에서 다음 작업을 수행할 수 있습니다.

<a href="some/url" ng-click="$event.stopPropagation()">A link outside of the app</a>

첫 번째 포인트는 angular handle all default로 요소를 클릭한 후 라우팅 시스템을 통해 href 속성 값을 해결합니다.자세한 내용은 여기 Angular docs(각도 문서)를 참조하십시오.

두 번째 포인트는 베이스 URL을 잘못 사용했다는 것입니다./segments를 사용하는 대신 /segments/를 사용해야 합니다.문자열 끝의 슬래시는 매우 중요한 의미를 가집니다!베이스에 없는 각도 건너뛰기 링크(/segments/)

여기에 기재되어 있는 기타 솔루션.하지만 나는 그것을 사용하는 것을 추천한다.

$rootElement.off('click');

일부 컨트롤러에서는 실행 기능이 없습니다.내 경우 angular binds 클릭 핸들 전에 실행 함수가 호출되었습니다.

모두에게 행운을 빈다!:)

언급URL : https://stackoverflow.com/questions/20980201/angular-ui-router-link-out-of-app-but-in-the-same-domain