我怎么会有UI路由器到一个外部链接，如google.com？ [英] How would I have ui-router go to an external link, such as google.com?

问题描述

例如：

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

            })

网址假定这是一个内部状态。我希望它像HREF或东西的效果。

url assumes that this is an internal state. I want it to be like href or something to that effect.

我有一个导航结构，将建立从UI的路线，我需要一个链接转到一个外部链接。不一定只是谷歌，这只是一个例子。

I have a navigation structure that will build from the ui-routes and I have a need for a link to go to an external link. Not necessarily just google, that's only an example.

不找它的链接或$ state.href（' http://www.google.com ）。声明需要它的路由配置。

Not looking for it in a link or as $state.href('http://www.google.com'). Need it declaratively in the routes config.

推荐答案

角UI的路由器不支持外部URL，您需要使用用户重定向为 $ location.url（）或 $ window.open（）

Angular-ui-router doesn't support external URL, you need redirect the user using either $location.url() or $window.open()

我会建议你使用 $ window.open（'http://www.google.com'，'_self'）将打开URL在同一页。

I would suggest you to use $window.open('http://www.google.com', '_self') which will open URL on the same page.

更新

您还可以自定义 UI路由器通过添加参数外部，也可以是真正 / 假。

You can also customize ui-router by adding parameter external, it can be true/false.

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

然后配置 $ stateChangeStart 在您的国家和放大器;处理重定向的部分在那里。

Then configure $stateChangeStart in your state & handle redirection part there.

运行阻止

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

样品Plunkr

注意：打开Plunkr在新窗口，以使其工作，因为的谷歌 没有得到开放的iFrame由于某些保安理由。

Note: Open Plunkr in a new window in order to make it working, because google doesn't get open in iFrame due to some security reason.

这篇关于我怎么会有UI路由器到一个外部链接，如google.com？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！