我如何让ui-router转到外部链接,例如google.com？

Question

例如:

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

            })

url假设这是一个内部状态.我希望它像href或者那种效果.

我有一个将从ui路由构建的导航结构,我需要一个链接转到外部链接.不一定只是谷歌,这只是一个例子.

不是在链接中查找,也不是在$ state.href(' http://www.google.com ')中查找.在路由配置中以声明方式需要它.

Answer 1

角UI的路由器不支持外部URL,你需要使用重定向用户要么$location.url()或$window.open()

我建议你使用$window.open('http://www.google.com', '_self')哪个会打开同一页面上的URL.

更新

您也可以ui-router通过添加参数进行自定义external,它可以是true/ false.

  $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');
      }
    });
})

样品Plunkr

注意:在新窗口中打开Plunkr以使其正常工作,因为由于某些安全原因,谷歌无法在iFrame中打开.

Answer 2

你可以使用onEnter回调:

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

编辑

基于pankajparkar的答案,正如我所说,我认为你应该避免重写现有的参数名称.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');
            }
        }
    );
});

并使用它,有或没有内部网址:

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

Answer 3

如angular.js链接行为中所述 - 禁用 您需要使用的特定URL的深层链接

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

这将禁用特定所需链接上的angularJS路由.