Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Weird Interaction with $location.hash() and Chrome/Firefox #10659

Closed
bobber205 opened this issue Jan 7, 2015 · 16 comments
Closed

Weird Interaction with $location.hash() and Chrome/Firefox #10659

bobber205 opened this issue Jan 7, 2015 · 16 comments
Assignees
@Narretz
Labels
component: $location severity: regression
Milestone
1.3.x - superlumi...

Comments

@bobber205
Copy link

When I enter the following into Chrome

http://www.example.com/enter/contest#top

it turns into

http://www.example.com/enter/contest/#top

This also happens when just running $location.hash("top") without any hashes in the URL.

This causes $location.hash() to be "". I need this check because if I do $location.hash("top") in any repeated function I get #top#top. I have a simple "is it already 'top' if check but since chrome messes with the url, it's always blank.

$location.hash("top");
$anchorScroll();

makes the url fwiw

http://www.example.com/enter/contest/#top#top

Any ideas of a work around?
@bobber205 bobber205 mentioned this issue Jan 7, 2015
Closed
@Narretz
Copy link
Contributor

Narretz commented Jan 7, 2015

Hi,
what version of angular are you using? And are you using html5Mode?

@bobber205
Copy link
Author

I'm using 1.3.6
Not using html5 mode.

@arpit2438735
Copy link

html5Mode is feature given by Angularjs.Have a look to HTML5Mode link

@bobber205
Copy link
Author

Do I need to use html5mode() to use anchors?

@arpit2438735
Copy link

No, it is disable by default angular append /#/ after domain url

@martea
Copy link

martea commented Jan 9, 2015

We've also encounterd this issue, with the latest 1.3.8
before when the hash was working was 1.3.4

have you changed the default from "##" to "#/" ?

anyhow the latest update as a small revision update, did something major.

@Narretz
Copy link
Contributor

Narretz commented Jan 14, 2015

@petebacondarwin this sounds like it is related to the changes we made for the hash-handling,

@bobber205 are you using any kind of routing at all, or are you using the hash simply for scrolling? Also, could you post a reproduction?

@Narretz Narretz added this to the 1.3.x milestone Jan 14, 2015
@bobber205
Copy link
Author

Simply for scrolling. We're using anchorScroll() afterwards (made sure that
wasn't the cause and it isn't)

Will post repo in a bit

On Wed, Jan 14, 2015 at 12:43 PM, Narretz notifications@github.com wrote:

@petebacondarwin https://github.com/petebacondarwin this sounds like it
is related to the changes we made for the hash-handling,

@bobber205 https://github.com/bobber205 are you using any kind of
routing at all, or are you using the hash simply for scrolling? Also, could
you post a reproduction?

—
Reply to this email directly or view it on GitHub
#10659 (comment)
.

Buoyancy and displacement float my boat.

@bobber205
Copy link
Author

Not able to produce a example on plunker because it keeps messing with the url/url is not handled in standard way. Without setting up my own hosting, do you guys know of another place I could demo this?

@bobber205
Copy link
Author

Code so far:

<body ng-controller="MainCtrl">
    <a id="top">THIS IS THE TOP</a>

    <br/>
    <br/>
    <br/>
    <br/>
    <a id="bottom"></a>
    BOTTOM
  </body>
app.controller('MainCtrl', function($scope, $location, $anchorScroll, $timeout) {

  $timeout(function () {
      $location.hash("bottom");
     $anchorScroll();
  },1000);
});

@petebacondarwin
Copy link
Contributor

So the simple workaround for this is to actually provide a hashPrefix. For some reason at the moment if you don't provide a hashPrefix then it doesn't ignore the functionality - instead it assumes that everything after a hash is a "path" rather than a real hash.

See this example:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body ng-app="app" ng-controller="MainCtrl">
    <a id="top">THIS IS THE TOP</a>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <a id="bottom"></a>
    BOTTOM
  </body>
  <script src="angular.js"></script>
  <script type="text/javascript">
    angular.module('app', [])

    .config(function($locationProvider) {
      $locationProvider.hashPrefix('!');
    })

    .controller('MainCtrl', function($scope, $location, $anchorScroll, $timeout) {

      $timeout(function () {
        console.log("scrolling!");
          $location.hash("bottom");
          debugger;
         $anchorScroll();
      },1000);
    });
  </script>
</body>
</html>

@petebacondarwin
Copy link
Contributor

We ought not to have to do this and it appears that we didn't previously. So this is a regression that needs fixing. @Narretz do you have any cycles to take a look?

@bobber205
Copy link
Author

The above workaround does work, just confirmed locally in Chrome latest stable.

However, if I put do hashPrefix("#") and then use .hash("#") the app basically implodes.

I also just noticed that without any use of hasPrefix (basically my current code base with no changes) I'm getting an infinite digest error OCCASIONALLY.

 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.6/$rootScope/infdig?p0=10&p1=%5B%5D
    at http://mywebsite/app/assets/js/vendor/angularjs/angular.js:63:12
    at Scope.$digest (http://mywebsite/app/assets/js/vendor/angularjs/angular.js:14232:19)
    at Scope.$apply (http://mywebsite/app/assets/js/vendor/angularjs/angular.js:14456:24)
    at done (http://mywebsite/app/assets/js/vendor/angularjs/angular.js:9614:47)
    at completeRequest (http://mywebsite/app/assets/js/vendor/angularjs/angular.js:9804:7)
    at XMLHttpRequest.requestLoaded (http://mywebsite/app/assets/js/vendor/angularjs/angular.js:9745:9)
angular.js:63 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Seems related as when I put in hashPrefix("#") I got this error and many others, like

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: autoScrollWatch","newVal":"/top","oldVal":""}],[{"msg":"fn: autoScrollWatch","newVal":"","oldVal":"/top"}],[{"msg":"fn: autoScrollWatch","newVal":"/top","oldVal":""}],[{"msg":"fn: autoScrollWatch","newVal":"","oldVal":"/top"}],[{"msg":"fn: autoScrollWatch","newVal":"/top","oldVal":""}]]

screen recording

@Narretz
Copy link
Contributor

Narretz commented Jan 15, 2015

It's not recommended to use # as the hashPrefix. It's usually something like !.

@petebacondarwin I can take a look next week

@bobber205
Copy link
Author

@Narretz good to know, thanks! 💃 sticking with ! for now.

Is /register#!#top what I can expect even under ideal conditions?

@Narretz Narretz self-assigned this Jan 20, 2015
@petebacondarwin
Copy link
Contributor

I think this is actually a duplicate of #8675

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Narretz Narretz

Labels
component: $location severity: regression
Projects
None yet
Milestone
1.3.x - superluminal-nudge
Development

No branches or pull requests
5 participants
@petebacondarwin @arpit2438735 @martea @Narretz @bobber205