View doesn't change when navigating to link #8869

brianharwell · 2014-08-31T13:56:57Z

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

tbosch · 2014-09-03T00:20:24Z

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?

tbosch · 2014-09-03T00:22:00Z

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

brianharwell · 2014-09-03T00:49:11Z

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

brianharwell · 2014-09-03T00:51:42Z

This link is...

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

*With some tags stripped so it displays as text

tbosch · 2014-09-03T00:52:13Z

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

tbosch · 2014-09-03T00:52:31Z

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

The trick with setting `<base href=".">` has not worked since Angular 1.2.0. It is also misleading that it talks about `$routeProvider.otherwise` which is not important in this case. Related to angular#8869

tbosch · 2014-09-03T18:55:13Z

Hi,
thanks for your time. Here is a plunker that you can start to work on to reproduce your issue: http://plnkr.co/edit/VAo9ACKgQz6dTUHwW2AB?p=preview

We saw that $locationChangeSuccess event was not fired. Could you also check the $locationChangeStart event? (see the plunker).

Short summary so far:

no <base> tag
no html5 mode
angular 1.2.18
IE11
error: $location does not pick up the change to the url (e.g. it does not even fire a $locationChangeSuccess event...).
error occurs when navigating form the url /Profile/#/Contact/Edit/2013 to url /Profile/#/Contact via a <a href="...">.

tbosch · 2014-09-03T18:55:44Z

Ah yes, and it works fine in Chrome and Firefox.

The trick with setting `<base href=".">` has not worked since Angular 1.2.0. It is also misleading that it talks about `$routeProvider.otherwise` which is not important in this case. Related to #8869 Closes #8908

michaelkrog · 2014-09-29T06:28:20Z

I can confirm this using IE10 and angular 1.2.23.

Also: Perhaps it is related to #9143?

michaelkrog · 2014-09-29T07:17:51Z

Worked around it by doing this to my html tag:

<html hacked-for-ie>

and adding this to my javascript:

if(window.navigator.userAgent.indexOf('MSIE ') >= 0) {
    $('[hacked-for-ie]').on('click', 'a', function() {
        window.location.href = $(this).attr('href');
    });
}

gkalpak · 2014-09-29T08:31:13Z

@michaelkrog: Come on, do it right ! Make it a directive :)

michaelkrog · 2014-09-29T08:42:53Z

:-)

Yeah, it calls for a (temporary) directive @gkalpak, but it requires Jquery and not just jqlite. I don't know if I would like a directive to do that.

But for the kicks - it would be something like this:

function FixIEHistoryDirective() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if($window.navigator.userAgent.indexOf('MSIE ') >= 0) {
                element.on('click', 'a', function() {
                    $window.location.href = $(this).attr('href');
                });
            }
        }
    }
}

.........

myModule.directive('fixIeHistory', FixIEHistoryDirective);

<html fix-ie-history>

gkalpak · 2014-09-29T09:20:03Z

@michaelkrog: Why would it require jQuery ???
And please use $window.

michaelkrog · 2014-09-29T09:25:42Z

@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

gkalpak · 2014-09-29T10:30:36Z

@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;
                    }
                });
            }
        }
    };
});

tspaeth · 2014-09-29T15:43:02Z

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... :-)

gkalpak · 2014-09-29T17:07:06Z

@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 ?

tspaeth · 2014-09-29T19:05:15Z

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

michaelkrog · 2014-09-30T07:42:30Z

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).

tspaeth · 2014-09-30T09:20:58Z

@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...

tbosch · 2014-10-02T00:32:14Z

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)?

michaelkrog · 2014-10-02T10:15:23Z

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

The trick with setting `<base href=".">` has not worked since Angular 1.2.0. It is also misleading that it talks about `$routeProvider.otherwise` which is not important in this case. Related to angular#8869 Closes angular#8908

tbosch · 2014-10-04T00:24:53Z

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

aspantel · 2016-04-06T19:21:07Z

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?

Narretz · 2016-04-06T22:19:06Z

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

tbosch self-assigned this Sep 2, 2014

tbosch added this to the Backlog milestone Sep 3, 2014

tbosch modified the milestones: Purgatory, Backlog Sep 3, 2014

tbosch added component: $location labels Sep 3, 2014

tbosch removed their assignment Sep 3, 2014

tbosch self-assigned this Sep 3, 2014

tbosch added the browser: IE11 label Sep 3, 2014

michaelkrog mentioned this issue Sep 29, 2014

Settings knap virker i nogle tilfælde ikke i IE11 DRB-IT/blacktiger-controller#114

Closed

tbosch mentioned this issue Oct 3, 2014

fix($browser): don’t use history api when only the hash changes #9406

Closed

tbosch closed this as completed Oct 4, 2014

angular locked and limited conversation to collaborators Apr 6, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

View doesn't change when navigating to link #8869

View doesn't change when navigating to link #8869

brianharwell commented Aug 31, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

brianharwell commented Sep 3, 2014

brianharwell commented Sep 3, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

michaelkrog commented Sep 29, 2014

michaelkrog commented Sep 29, 2014

gkalpak commented Sep 29, 2014

michaelkrog commented Sep 29, 2014

gkalpak commented Sep 29, 2014

michaelkrog commented Sep 29, 2014

gkalpak commented Sep 29, 2014

tspaeth commented Sep 29, 2014

gkalpak commented Sep 29, 2014

tspaeth commented Sep 29, 2014

michaelkrog commented Sep 30, 2014

tspaeth commented Sep 30, 2014

tbosch commented Oct 2, 2014

michaelkrog commented Oct 2, 2014

tbosch commented Oct 4, 2014

aspantel commented Apr 6, 2016

Narretz commented Apr 6, 2016

View doesn't change when navigating to link #8869

View doesn't change when navigating to link #8869

Comments

brianharwell commented Aug 31, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

brianharwell commented Sep 3, 2014

brianharwell commented Sep 3, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

tbosch commented Sep 3, 2014

michaelkrog commented Sep 29, 2014

michaelkrog commented Sep 29, 2014

gkalpak commented Sep 29, 2014

michaelkrog commented Sep 29, 2014

gkalpak commented Sep 29, 2014

michaelkrog commented Sep 29, 2014

gkalpak commented Sep 29, 2014

tspaeth commented Sep 29, 2014

gkalpak commented Sep 29, 2014

tspaeth commented Sep 29, 2014

michaelkrog commented Sep 30, 2014

tspaeth commented Sep 30, 2014

tbosch commented Oct 2, 2014

michaelkrog commented Oct 2, 2014

tbosch commented Oct 4, 2014

aspantel commented Apr 6, 2016

Narretz commented Apr 6, 2016