期望的行为

Question

期望的行为

我有一个位于此网址的搜索页面：

http://example.com/search

所需的行为是提供的查询参数传递给页面，并在用户键入不同的查询时更新。

如，

http://example.com/search?q=foo

导致搜索框中包含＆＃34; foo＆＃34;在页面加载。如果用户输入＆＃34;美味的煎饼＆＃34;在搜索框中，位置栏的网址会自动更新为：

http://example.com/search?q=delicious+pancakes

这部分工作正常;我使用$watch来监控查询的值，然后通过$location.search('q', newValue)更新位置栏。

但我想使用HTML5模式（我正在使用$locationProvider.html5Mode(true)），我需要使用hashbang回退来为IE9用户工作。

我希望hashbang回退看起来像这样：

http://example.com/search#?q=delicious+pancakes

问题

如果我没有设置<base>元素，$ location服务会将域后的所有内容视为路径，因此它实际上会在IE9中回退到这一点：

http://example.com/#search?q=delicious+pancakes

这会导致浏览器重定向到主页（即，它会让我完全离开搜索页面！）

所以最好的做法似乎是使用<base>标签;所以我把它设置为

<base href="http://example.com/search/"></base>

（注意斜杠;我知道Angular和HTML规范都需要这样做。）

但是，这意味着我必须使用以下网址：

http://example.com/search/?q=delicious+pancakes

（IE9后备版为http://example.com/search/#?q=delicious+pancakes）

这有效，但我不想要求用户在＆＃34;搜索＆＃34;之后输入斜杠。在问号之前。目前，如果我尝试通过http://example.com/search?q=foo访问该页面，我会在控制台中收到此错误：

TypeError: whole is undefined

这个错误显然是因为$ location服务的$$rewrite函数没有返回任何内容。作为参考，我将从angular.js复制源：

this.$$rewrite = function(url) {
    var appUrl, prevAppUrl;

    if ( (appUrl = beginsWith(appBase, url)) !== undefined ) {
      prevAppUrl = appUrl;
      if ( (appUrl = beginsWith(basePrefix, appUrl)) !== undefined ) {
        return appBaseNoFile + (beginsWith('/', appUrl) || appUrl);
      } else {
        return appBase + prevAppUrl;
      }
    } else if ( (appUrl = beginsWith(appBaseNoFile, url)) !== undefined ) {
      return appBaseNoFile + appUrl;
    } else if (appBaseNoFile == url + '/') {
      return appBaseNoFile;
}

有没有什么方法可以在＆＃34;搜索＆＃34;之后没有斜线实现所需的行为，并且仍然支持IE9？

Answer 1

使用条件语句从IE5mode中排除IE9：

if(!!$window.innerWidth && !$window.matchMedia)
  {
  $locationProvider.html5Mode({enabled: false, requireBase: false});
  $locationProvider.hashPrefix("search");
  }
else
  $locationProvider.html5Mode({enabled: true, requireBase: false});

<强>参考

如何配置角度以使用基线路径而不使用尾部斜杠？

期望的行为

问题

1 个答案: