zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

Navigation with ui-router inside nested views broken in IE11 #749

Open philippeluickx opened 8 years ago

philippeluickx commented 8 years ago

Create a view (a) and a nested view (a.1). Create a third location (b). Create a ui-sref to b in a.1.

When going to a.1 in IE11, clicking on the link to b will lead to a "page not found", ie. a duplicate homepage.

This only blocks when using the html5Mode config enabled (which is the common usecase nowadays). Blocks both on ui-sref or when in the controller doing a $state.go('b')

I am not sure yet if this is due to bugs in libraries (ui-router) or something goes wrong when using the YAML style magic.

Also my excuses for not showing any code, working on a seperate computer that has windows and IE...

Update: So it seems things work nice in the end when removing another config item:

$http.defaults.xsrfCookieName = 'csrftoken';

which I need for communicating with my django backend. Renaming this on front and back did not have any impact, so no naming conflict happening here.

I am a bit lost at what is happening.

philippeluickx commented 8 years ago

So what is happening in the network trace on IE is that the location of the template is wrong. It should be abc.com/templates/template_b.html. Instead it asks for abc.com/a/1/templates/template_b.html.

Still scratching my head on this one...

Update: I do have my

<base href="/" />

defined in the index.html

philippeluickx commented 8 years ago

Is it possible that the $http.get in the this.fromUrl ($TemplateFactory) is misbehaving? Everything seems fine and is identical between Chrome (where it works) and IE (where it breaks) up to that point. Both have the relative url passed to $http.get, so without the base url.

Update: When adding the base url in front of the url parameter, IE works (and Chrome does not break).

so:

else return $http
.get("http://localhost:8079/" + url,
...

Some more info on http://stackoverflow.com/questions/6541721/ie-doesnt-support-relative-paths-in-the-base-element-when-referencing-css-files

philippeluickx commented 8 years ago

Allright, so the one thing that seems to do the trick, is to put the inside the and NOT the .

Magic... also not sure if there is anything that should be done about this (and upstream or here?). Maybe mention this in the docs?