在ui-router中获取查询字符串

时间:2016-12-15 11:11:02

标签: angularjs angular-ui-router

我有以下网址http://localhost:81/#/payment/confirmed/success=0&invoiceid=42828852E9FFE2923CB6?useraction=canceled,我希望在?之后获取查询字符串的值。我该怎么做。

我已经尝试了什么

$stateProvider
.state('payment.confirmed', {
    url: '/confirmed',
    templateUrl: 'app/payment/confirmed/confirmed.html',
    controller: 'confirmedController'
})
.state('payment.confirmedWithParams', {
    url: '/confirmed/success={confirmed}&invoiceid={invoiceNumber}',
    resolve: {
        saveData: function($stateParams){
            function getUrlParameter(param) {
                    var sPageURL = window.location.search.substring(1),
                        sURLVariables = sPageURL.split(/[&||?]/),
                        res;

                    console.info('sPageURL : ', sPageURL,
                                '\nwindow.location : ', window.location,
                                '\nsURLVariables : ', sURLVariables)

                    for (var i = 0; i < sURLVariables.length; i += 1) {
                        var paramName = sURLVariables[i],
                            sParameterName = (paramName || '').split('=');

                        if (sParameterName[0] === param) {
                            res = sParameterName[1];
                        }
                    }

                    return res;
            }

            var payment = {
                confirmed: ($stateParams.confirmed === '1'),
                invoiceNumber: $stateParams.invoiceNumber,
                userAction: getUrlParameter('useraction')
            };

            console.info('payment : ', payment)

            localStorage.setItem('payment', JSON.stringify(payment));
            window.location.href = '#/payment/confirmed';
        }
    }
});

除了返回payment.userAction的{​​{1}}之外,此方法正常。据我所知,从控制台记录问题就出现了,因为变量undefined是空的(未定义)。

我是否过于复杂的事情或者我错过了什么

4 个答案:

答案 0 :(得分:1)

为什么使用过于复杂的编码?

使用$stateParams

可以轻松实现

试试以下代码

$stateParams.useraction

如果您想要拆分URL概念

var sPageURL = window.location.href,
sURLVariables = sPageURL.split('useraction')[1].split('=')[1]
.......

演示

enter image description here

答案 1 :(得分:0)

从$ location service获取它

    // given URL http://example.com/#/some/path?foo=bar&baz=xoxo
    var searchObject = $location.search();
    // => {foo: 'bar', baz: 'xoxo'}

答案 2 :(得分:0)

使用$ stateparams

.controller('Crtl',[ '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)

答案 3 :(得分:0)

看起来您混合了URL参数和查询参数。 网址参数只是网址的动态部分,例如/something/{id}/otherthing,其中id是网址的可变部分。 ?中的/something?foo&bar引入了查询参数,例如foo,其中bar$stateParams是2个查询参数。

如果在网址中指定的所有内容均可通过url: '/confirmed/success={confirmed}&invoiceid={invoiceNumber}?useraction=canceled', 访问。

根据您的需要,您可以更改

url: '/confirmed?confirmed&invoiceNumber&useraction',

成像:

confirmed

然后invoiceNumber$stateParams.confirmed中提供了$stateParams.invoiceNumberuseraction。无需手动解析查询字符串。 {{Form::open(array('action' => 'Testing@store', 'method' => 'post'))}} <div class="form-group"> {!! Form::label('title', 'Title:', ['class' => 'control-label']) !!} {!! Form::text('title', null, ['class' => 'form-control']) !!} </div> <div class="form-group"> {!! Form::label('description', 'Description:', ['class' => 'control-label']) !!} {!! Form::textarea('description', null, ['class' => 'form-control']) !!} </div> {!! Form::submit('Submitform', ['class' => 'btn btn-primary']) !!} {!! Form::close() !!} 也是如此。

有关详细信息,请参阅the documentation,因为您还可以拥有在URL中不可见的状态参数,或者定义查询参数的默认值。