角度从一个状态重新路由到另一个状态

时间:2017-01-14 03:18:33

标签: javascript angularjs angular-ui-router angular-routing

当用户尝试访问我的主页时,我希望能够根据查询参数将它们重定向到不同的状态。

例如,如果URL为:http://example.com,则加载主页。 如果网址为:http://example.com?channel=1,则不要加载主页并立即转到其他某个州。

这是我的(不起作用):

$stateProvider
...
.state('default-template.home', {
    url: '/?channel&campaign',
    views: {
        '': {
            templateUrl: 'app/pages/home/home.html',
            controller: 'HomeCtrl as vm'
        }
    },
    resolve: {
        data: ['$rootScope', '$stateParams', '$state', function($rootScope, $stateParams, $state) {

            var channel = $stateParams.channel;

            // If channel is 1, redirect 
            if (channel === 1) {
                $state.go('default-template.other-state', {channel: channel});
            }
        }]
    }
})

问题似乎是当两个状态都被启动时($ stateChangeStart事件被启动),最终结果是用户总是在主页上结束。

有关如何使这项工作的任何想法?

1 个答案:

答案 0 :(得分:0)

您可以使用$ location内置服务来实现此目的。

您的代码必须具有虚假路径的附加状态,如下所示

 $stateProvider
    ...
    .state('default-template.fake.home', {
        url: '/?channel',
        views: {
            '': {
                templateUrl: 'app/pages/home/home.html',
                controller: 'HomeCtrl as vm'
            }
        },
    })
    .state('default-template.home', {
        url: '/?channel&campaign',
        views: {
            '': {
                templateUrl: 'app/pages/home/home.html',
                controller: 'HomeCtrl as vm'
            }
        },
        resolve: {
            data: ['$rootScope', '$stateParams', '$state', function($rootScope, $stateParams, $state) {

                var channel = $stateParams.channel;

                // If channel is 1, redirect 
                if (channel === 1) {
                    $state.go('default-template.other-state', {channel: channel});
                }
            }]
        }
    })

您的HomeCtrl应使用$ location服务访问以下网址

angular.controller('HomeCtrl',function($location,$state){
            if($location.$$url= '')     //check if it is empty
                $state.go('default-template.home');
                ....................................
    })

LIVE DEMO