Angular Ui-router ссылка из приложения, но в том же домене

Я пытаюсь использовать ui-router в своем приложении angular.

Мой базовый URL-адрес - "/сегменты", и я использую базовый тег для его определения.

<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?

Ответ 1

Это может быть полезно: angular.js поведение ссылки - отключить глубокую привязку для определенных URL-адресов

Подводя итог, вы можете сообщить Angular игнорировать ссылку для целей маршрутизации, добавив к ней target="_self". Это позволит браузеру обрабатывать ссылку, свободную от Angular. Например:

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

Этот подход работает для ссылок, которые вы знаете заранее, не должны обрабатываться Angular.

Ответ 2

Что происходит, ui-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-адресу.

EDIT: предупреждение, это вызовет бесконечный цикл переадресации, если URL-адрес - это Angular путь с плохим маршрутом.

Ответ 3

В одном элементе вы можете просто:

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

Ответ 4

Первая точка: angular обрабатывать все щелчки по элементу по умолчанию и пытаться разрешить значение атрибута href через систему маршрутизации. Информация о нем находится здесь Angular docs

Вторая точка: я использовал неправильный базовый url. Вместо использования /сегментов я должен использовать /сегменты/. Слэш в конце строки имеет очень важное значение! Angular пропустить ссылки, которые не находятся на моей базе (/segment/).

Другое решение описано здесь. Но я предлагаю использовать

$rootElement.off('click');

в некотором контроллере, а не в функции запустить. В моем случае функция запуска вызывается до того, как angular связывается с кликом дескриптора.

Так удачи всем!:)