View doesn't change when navigating to link

There is an issue when $location is injected into a controller. Some links stop working. The URL changes but the view is not changed. The $route events are not fired either.

It has been over a year and this insidious bug is still not fixed for IE. Chrome and Firefox appear to work fine but I had to add "hacky" code in order for IE11 to navigate.

http://stackoverflow.com/questions/17835768/angularjs-view-doesnt-change-when-navigating-to-link

https://groups.google.com/forum/#!searchin/angular/link$20not$20working/angular/BsenavakfyQ/wtbRBVBxJ0sJ

Hi,
$location is made to allow in-app navigation. It captures all links that resolve to a url that match the <base> tag. If you want to leave an angular application, you need to use window.location directly.

Could you create a jsfiddle / plunker for your particular use case?

Maybe we need to update our docs, especially the guide for $location: https://docs.angularjs.org/guide/$location.

I don't know if I can create a jsfiddle demonstrating the issue but if you want I could do a screen sharing session to show you.

I am not trying to navigate away from my site.

The link that does not work is in my header and is as follows...

Companies

and the reason I am injectimg $location is to do this...

var promise = companySvc.Update($scope.Company);
promise.then(function () { $location.path('/Company'); });

Thanks

This link is...

href="/Portal/#/Company">Companies

*With some tags stripped so it displays as text

Ok, lets do a screen share tomorrow. How about 11am PDT?

Could you send me your email to tbosch@google.com?

@gkalpak

@gkalpak: The following page says: on() - Does not support namespaces, selectors or eventData.
The jQuery function signature is: .on( events [, selector ] [, data ], handler )

I'm using 'a' as a selector.

https://docs.angularjs.org/api/ng/function/angular.element

@michaelkrog

@michaelkrog : I know. You need to be creative :)

app.directive('fixIe', function fixIe($window) {
    return {
        restrict: 'A',
        link: function fixIePostLink(scope, elem) {
            if ($window.navigator.userAgent.indexOf('MSIE ') >= 0) {
                elem.on('click', function (evt) {
                    var target = evt.target;
                    if (target.nodeName.toLowerCase() === 'a') {
                        $window.location.href = target.href;
                    }
                });
            }
        }
    };
});

@gkalpak

just before others copy it -- FYI: That directive by @gkalpak destroys the whole application here - just tried to integrate it into our setup with ui-router as routing engine and really ugly does a whole reload on the page change... :-)

@tspaeth

@tspaeth: I just wrapped @michaelkrog's code into a directive. If you set location.href to a new value, don't you usually expect the page to be reloaded ?

Sure. :-) Just wanted to state that the directive probably won't fix the originating problem nor what #9143 is about...

@tspaeth

Good point @tspaeth, but that should "only" be the case if html5mode is true. In my case html5mode is false and it fixes my issue without any application reload on each link.

Bottom of the problem for me is that I have 2 links that goes to 2 different views. It works fine, except that in IE(10&11) it will stop sending '$locationChangeStart' after a few clicks back and forth although the URL changes in the browser. The result is that the view does not change. Using this fix for an application with html5mode=false apparently makes it work in IE.

I have been unable to reproduce it using a simple plunkr. I will try to boil down what I have to make a plunkr out of it.

The problem does not exist in other browsers I have tried(Safari, Chrome, Firefox).

@michaelkrog

@michaelkrog The described behavior is indeed the same as for #9143 - somehow "funny".

I have also html5mode to off, but if I introduce the directive into the project, it'll rewrite the url before the ui-router state transition is ready and always lead to the "root" - "index" - state. Therefore it'll always end up with /#/ instead of the state /#/foo/bar/1 or similar.

With html5mode it also occurs, true:
Even though it is a demo from a totally different module, it works quite well in reproducing the issue in IE10/IE11 by bookmarking one view, navigating away, clicking on it again and navigating away, click on it again. Then you have exactly that state you describe: http://angular-route-segment.com/src/example/#/section1/2

And I have the feeling, that it'll be very hard to track down the issue "backwards" compatible...

I think I found the bug in IE10/11 and have a very simple reproduction case, see #9143 (comment)

Can you confirm that you have some links that are within the angular applications (i.e. inside of ng-app) and some links outside of the angular application (or doing navigation via direct changes to location)?

I can confirm that I have both links and direct changes to $location.path.

docs($location): clarify guide regarding link handling

Closing this for now. Please create a a new issue when the change is not working for your use case.

Hello, we seem to be experiencing the same issue in IE10 using Angular2.
After a few clicks our routing stops showing corresponding view.
Any pointers to help us in the Angular2 (Dart) world?

@yoxel not in this repo: see https://github.com/angular/angular

Navigation Menu

Repository navigation

View doesn't change when navigating to link #8869

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

View doesn't change when navigating to link #8869

Description

Activity

tbosch commented on Sep 3, 2014

tbosch commented on Sep 3, 2014

brianharwell commented on Sep 3, 2014

brianharwell commented on Sep 3, 2014

tbosch commented on Sep 3, 2014

tbosch commented on Sep 3, 2014

10 remaining items

michaelkrog commented on Sep 29, 2014

gkalpak commented on Sep 29, 2014

tspaeth commented on Sep 29, 2014

gkalpak commented on Sep 29, 2014

tspaeth commented on Sep 29, 2014

michaelkrog commented on Sep 30, 2014

tspaeth commented on Sep 30, 2014

tbosch commented on Oct 2, 2014

michaelkrog commented on Oct 2, 2014

tbosch commented on Oct 4, 2014

aspantel commented on Apr 6, 2016

Narretz commented on Apr 6, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions