it-swarm.com.ru

Как бы я перевел ui-router на внешнюю ссылку, например на google.com?

Например:

 $stateProvider
            .state('external', {
                url: 'http://www.google.com',

            })

url предполагает, что это внутреннее состояние. Я хочу, чтобы это было похоже на HREF или что-то в этом роде.

У меня есть структура навигации, которая будет построена на основе UI-маршрутов, и мне нужна ссылка для перехода на внешнюю ссылку. Не обязательно просто Google, это только пример. 

Не искать его в ссылке или в виде $ state.href (' http://www.google.com '). Это нужно декларативно в конфиге маршрутов.

24
Shane

Angular-ui-router не поддерживает внешний URL, вам нужно перенаправить пользователя с помощью $location.url() или $window.open()

Я бы предложил вам использовать функцию $window.open('http://www.google.com', '_self'), которая откроет URL на той же странице.

Обновление

Вы также можете настроить ui-router, добавив параметр external, это может быть truefalse.

  $stateProvider
  .state('external', {
       url: 'http://www.google.com',
       external: true
  })

Затем настройте $stateChangeStart в вашем состоянии и обработайте часть перенаправления там.

_/Запустить блок

myapp.run(function($rootScope, $window) {
  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.external) {
        event.preventDefault();
        $window.open(toState.url, '_self');
      }
    });
})

Образец Планкр

Note: откройте Plunkr в новом окне, чтобы заставить его работать, потому что google не открывается в iFrame по какой-то причине безопасности.

33
Pankaj Parkar

Вы можете использовать onEnter callback:

 $stateProvider
    .state('external', {
        onEnter: function($window) {
            $window.open('http://www.google.com', '_self');
        }
    });

Правка

Основываясь на ответе Панкайпаркара, как я уже сказал, я думаю, вам следует избегать переопределения существующего имени параметра. ui-router приложил немало усилий, чтобы различать состояния и URL, поэтому использование url и externalUrl может иметь смысл ...

Итак, я бы реализовал параметр externalUrl следующим образом:

myApp.run(function($rootScope, $window) {
    $rootScope.$on(
        '$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams) {
            if (toState.externalUrl) {
                event.preventDefault();
                $window.open(toState.externalUrl, '_self');
            }
        }
    );
});

И используйте его так, с внутренним URL или без него:

$stateProvider.state('external', {
    // option url for sref
    // url: '/to-google',
    externalUrl: 'http://www.google.com'
});
25
rixo

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

<a href="newlink" target="_self">link to external</a>

это отключит маршрутизацию angularJS по определенной желаемой ссылке.

9
Ebrahim

Я преобразовал принятый ответ в ответ, в котором предполагается последняя версия AngularJS (в настоящее время 1.6), ui-router 1.x , Webpack 2 с трансплантацией Babel и плагин ng-annotate для Babel .

.run(($transitions, $window) => {
  'ngInject'
  $transitions.onStart({
    to: (state) => state.external === true && state.url
  }, ($transition) => {
    const to = $transition.to()
    $window.open(to.url, to.target || '_self')
    return false
  })
})

А вот как может быть настроено состояние:

.config(($stateProvider) => {
  'ngInject'
  $stateProvider
    .state({
      name: 'there',
      url:'https://google.com',
      external: true,
      target: '_blank'
    })
})

Использование:

<a ui-sref="there">To Google</a>
0
Christiaan Westerbeek