Question

我已经处理了这个查询字符串参数问题很长一段时间，如果转到/一切正常，但如果尝试像/?anything这样的话，它就会赢得＆＃t; t工作，这些是我的两个州，每个州都有自己的档案。

var access = accessConfig.accessLevels;
$stateProvider.state('store', {
  abstract: true,
  templateUrl: 'store/main.html',
  data: {
    access: access.user
  }
});

$stateProvider.state('store.home', {
  url: '/?cart',
  views: {
    '': {
      templateUrl: 'store/home/home.html',
      controller: 'store.home as vm'
    }
  },
  data: {
    title: 'Home'
  }
});

每当我转到/时，我都会得到预期的结果而没有任何问题，但如果我尝试转到/?cart或/?anything我会得到一个空白页面，我有{{1}我随时转到stateChangeStart调用的事件，但当我转到/时，事件甚至没有被触发。

我顺便使用/?anything，有关正在发生的事情的任何线索？

如果使用html5mode(true)则有效，但如果直接在地址栏中复制/粘贴网址则无效。

Answer 1

我创建了working plunker here。它表明，这种情况和状态定义是正确的。

我们必须确保 cart 参数带有值。这些例子可行，因为我们传递了购物车参数：

<a ui-sref="store.home({cart:458})">
<a ui-sref="store.home({cart:'xyz'})">

由于plunker环境需要提供一些 <base href="" ，我还会使用href与其合作：

<div ng-controller="appCtrl" >
  <a href="{{path}}?cart=abc">
  <a href="{{path}}?cart=123">
  ...

path所在的位置：

.controller('appCtrl', ['$scope',function($scope) {
    $scope.path = document.location.pathname;
}])

检查所有here是否已启用 html5Mode

EXTEND

为了表明即使我们想通过地址栏传递参数，这仍然有效，我在这里创建了一个特殊的plunker

http://run.plnkr.co/plunks/syVPqrhNZpQJDdcCxx9b/?cart=myTestParam

我们可以看到，它传递了参数 /?cart=myTestParam ，我们可以在此模板中看到：<pre>{{$stateParams | json}}</pre>：

{
  "cart": "myTestParam"
}

您可以在此处观察其代码

http://plnkr.co/edit/syVPqrhNZpQJDdcCxx9b?p=catalogue

代码中的重要部分是<head>部分和元素库

正确设置html5模式：

$locationProvider.html5Mode({enabled: true, requireBase: true});

角度ui路由器空白页面与查询字符串参数

1 个答案: