Re: [angular.js] Please fix! Routing breaks if URL contains encoded forward slash

5,962 views
Skip to first unread message

Peter Bacon Darwin

unread,
Jul 12, 2012, 8:04:07 AM7/12/12
to ang...@googlegroups.com
You need to think in a different way with Angular.  Don't get bogged down in the JQuery style of manipulating elements directly.  Also use the built in Angular services (such as $location).  Things will work out much better for you.
Here is a working plunk:  http://plunker.no.de/edit/KXHIvW?live=preview 
Pete

On 12 July 2012 12:38, dg988 <daniel....@gmail.com> wrote:
http://jsfiddle.net/e6ftX/13/

Hello. I've implemented a "browse" (search) feature in my app that uses routing to make urls sharable/bookmarkable.

Check out the fiddle and you'll see that any time a "/" is included in the search, which gets encodeURIComponent()-ed, the route breaks, even as %2F. All browsers, angular routing only as far as I can tell.

Any ideas on a solution? Thanks a lot.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ymXeYYVpDOYJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Peter Bacon Darwin

unread,
Jul 12, 2012, 8:25:48 AM7/12/12
to ang...@googlegroups.com
Sorry, I accidentally used the same controller: Fixed it now:  http://plunker.no.de/edit/KXHIvW?live=preview
Not sure what you mean by shouldn't work, etc.  You need to use $location as it understands Angular's routing mechanisms better.
Pete

On 12 July 2012 13:20, dg988 <daniel....@gmail.com> wrote:
Same scope*.


On Thursday, July 12, 2012 8:19:32 AM UTC-4, dg988 wrote:
Thanks. That's definitely a nicer implementation than mine in terms of angular's power, but you've edited my HTML so that both the view and the search box are contained in the same controller. This just isn't possible in my scenario. Or, at least, I don't think it is. I had originally attempted this, but figured the simple window.location.hash trick was reasonable.

Also, is there any reason that doing it this way shouldn't work? And shouldn't be fixed?


On Thursday, July 12, 2012 8:04:07 AM UTC-4, Peter Bacon Darwin wrote:
You need to think in a different way with Angular.  Don't get bogged down in the JQuery style of manipulating elements directly.  Also use the built in Angular services (such as $location).  Things will work out much better for you.
Here is a working plunk:  http://plunker.no.de/edit/KXHIvW?live=preview 
Pete

On 12 July 2012 12:38, dg988 wrote:
http://jsfiddle.net/e6ftX/13/

Hello. I've implemented a "browse" (search) feature in my app that uses routing to make urls sharable/bookmarkable.

Check out the fiddle and you'll see that any time a "/" is included in the search, which gets encodeURIComponent()-ed, the route breaks, even as %2F. All browsers, angular routing only as far as I can tell.

Any ideas on a solution? Thanks a lot.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ymXeYYVpDOYJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/KEjstijbJQQJ.

Peter Bacon Darwin

unread,
Jul 12, 2012, 9:15:20 AM7/12/12
to ang...@googlegroups.com
OK, so there is some double encoding going on - if you submit "Foo/Bar" the has becomes Foo%252FBar, which is Foo%2FBar encoded again.
But the trouble is if you don't encode it yourself the $location doesn't seem to encode it for you.  So it gets double encoded on the way out (or not at all) and only decoded once on the way back (or not at all).
Could be a bug.
Pete

On 12 July 2012 13:56, dg988 <daniel....@gmail.com> wrote:
This doesn't actually work. Poke around this.

http://plunker.no.de/edit/0FauHY?live=preview

Even though your changes to my original code are much appreciated and a huge improvement, I still think this is a bug.

Thanks.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/vDJzDZyr4_gJ.

Khoi

unread,
Aug 2, 2012, 3:20:08 AM8/2/12
to ang...@googlegroups.com
I got the same problem and it took me days!!! to realize how to solve it:
HTML:
<a href="#/pageA/part01">...
<a href="#/pageB/partXXX">... 

JavaScript wrong:
angular.module('myApp', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/pageA/:partId', {
templateUrl: "pageAUrl"
,controller: PageAController
}).when('/pageB/:partId', {
template: "pageBUrl"
,controller: PageBController
});
});

JavaScript Correct (the difference is using config()):
angular.module('myApp', []).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/pageA/:partId', {
templateUrl: "pageAUrl"
,controller: PageAController
}).when('/pageB/:partId', {
template: "pageBUrl"
,controller: PageBController
});
}]);
Reply all
Reply to author
Forward
0 new messages