angularjs – 在angularUI路由器中处理斜杠

前端之家收集整理的这篇文章主要介绍了angularjs – 在angularUI路由器中处理斜杠前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
自从我开始处理这个问题已经好几个小时了,我似乎无法摆脱这个问题。

我有一个可能导致用户实际输入网址的应用程序。在这种情况下,不难相信用户可能会输入尾部斜线。例如,

www.example.com/users/2 and www.example.com/edit/company/123

应该是一样的

www.example.com/users/2/ and www.example.com/edit/company/123/

这只需要在客户端处理URL路由。我没有兴趣在资源/ API调用中处理尾部斜杠。我只想在浏览器中处理拖尾的兴趣。

所以我研究并发现网上没有多少答案。他们中的大多数引导我到角ui路由器的FAQ部分。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

在这里,他们告诉我们写一个规则,这是我想要做的,但它似乎没有工作,或者也许我做错了。

这是我添加了我的代码的plunkr。

http://plnkr.co/edit/fD9q7L?p=preview

我把它添加到我的配置,其余的代码是基本的东西。

$urlRouterProvider.rule(function($injector,$location) {
  //if last charcter is a slash,return the same url without the slash
  if($location.$$url[length-1] === '/') {
    return $location.$$url.substr(0,$location.$$url.length - 2);
  } else {
    //if the last char is not a trailing slash,do nothing
    return $location.$$url;
  }
});

基本上,我想使可选的尾部斜线,即地址栏的存在或不存在对加载的状态没有影响。

有一个工作 plunker链接

这是更新的规则定义:

$urlRouterProvider.rule(function($injector,$location) {

    var path = $location.path();
    var hasTrailingSlash = path[path.length-1] === '/';

    if(hasTrailingSlash) {

      //if last charcter is a slash,return the same url without the slash  
      var newPath = path.substr(0,path.length - 1); 
      return newPath; 
    } 

  });

这些链接现在可以正常工作:

<ul class="nav">
    <li><a ui-sref="route1">Route 1</a></li>
    <li><a ui-sref="route2">Route 2</a></li>
    <li><a href="#/route1/">#/route1/</a></li>
    <li><a href="#/route2/">#/route2/</a></li>
    <li><a href="#/route1" >#/route1</a></li>
    <li><a href="#/route2" >#/route2</a></li>
  </ul>

魔术可以这样定义:如果有变化,请返回更改值…否则不做任何事情… see example

猜你在找的Angularjs相关文章