AngularJS路由参数包含任何字符

Question

我是AngularJS的新手,请原谅我,如果这是显而易见的,但我正在寻找能够回答这个棘手问题的人.我正在实现一个应用程序,需要将一些参数传递给特定视图以显示有关书籍的详细信息.基本上我希望能够使用以下路由表达式:

bookApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/catalog', {
            templateUrl: 'cataloglist.htm',
            controller: 'catCtrl'
        }).
        when('/book/:title/:chapter', {
            template: 'chapterdetail.htm',
            controller: 'chapterCtrl'
        }).
        otherwise({
            template: 'oops ... do not understand that route',
        });
    }]);

表达式/book/:title/:chapter应该允许我传递书名的名称.我希望能够通过任何一本书的任何标题.为了确保正确分隔内容,我将对标题值进行URL编码,以便在编码值中没有斜杠,并且该值将由斜杠字符清楚地分隔.这是构造包含值的URL的常规方法.

问题是存在包含斜杠字符的书名(例如The 3/5 solution)这是URL编码为The+3%2F5+Solution.所以可以像这样构建一个URL:

 /app/#/book/The+3%2F5+Solution/The%20Beginning

但是,我的经验似乎表明,在将其分解为参数之前,整个值都是URL解码的!这意味着任何带有斜杠的数据值都将被误解为两个值,并且路由参数的模式匹配被破坏,并且只传递值的前半部分.此外,该章节可能有斜杠在名称中也是如此.

如果我正在制作REST服务,我会对该值进行URL编码,并且在每个片段被解码之前,URL将被解析为片段.例如,我可以在URL中使用查询参数,如下所示:

app.jsp?title=The+3%2F5+Solution&chapter=The%20Beginning

这将正常工作.使用URL编码,我可以在标题中传递任何字符串值.我本来希望路由参数可以做同样的事情......但我已经提到过我对AngularJS很新.

%2F在确定碎片之前解码为斜线似乎是一个非常严重的错误.显然,您根本无法将带斜杠的值作为路由参数传递. 我在这里错过了什么吗？ 什么是允许我安全地传递其中包含任何可能字符的书名(以及带有任何字符的章节标题)作为路线参数的解决方案？

Answer 1

看一下angular的route.js源代码,就有可能实现你想要的东西:

path可以包含以冒号开头并以星号结尾的命名组:例如:name*.当路线匹配时,所有字符都热切地存储在$routeParams给定name的下面.

例如,像/color/:color/largecode/:largecode*\/edit匹配 /color/brown/largecode/code/with/slashes/edit和提取的路线:
color: brown
largecode: code/with/slashes.

注意:largecode*\示例中param 末尾的反斜杠.它不存在于以星号结尾的命名组的描述中,但它在示例中.我没有对此进行测试,也不知道是否需要反斜杠,因此请考虑它可能/可能不需要.

因此,您的问题的解决方案将如下所示: /book/:title*/chapter/:chapter*

注意添加的/chapter/部分.为了区分两个命名组,需要它.如果你只是使用/book/:title*/:chapter*,一切都将属于:title*命名组.但是,如果您使用/:title*/chapter/:chapter*,则angular知道:title*命名组何时结束:当它/chapter/在路径中遇到时./chapter/遗嘱之后的一切都属于:chapter*指定的群体