Prevent AngularJS from messing with anchored URLs

[Dario Gieselaar]

Hi all,

I'm running into an issue with Angular (1.0.4) and its URL handling/rewriting. I'm currently implementing Angular components in a pretty big application with a lot of legacy (JQuery-based) Javascript. For example, it uses anchors to provide deeplinks to tabs. However, Angular rewrites these anchors, appending '/'. So #anchor gets rewritten to #/anchor. I can prevent this rewriting by configuring a hashPrefix ('!'), but this results in the following error: 

Error: Invalid url "url#anchor", missing hash prefix "!" ! at Error (<anonymous>) at Object.LocationHashbangUrl.$$parse (/js/angular.js:5058:13) at Object.LocationHashbangUrl (/js/angular.js:5097:8) at $LocationProvider.$get (/js/angular.js:5423:19) at Object.invoke (/js/angular.js:2820:28) at /js/angular.js:2658:37 at getService (/js/angular.js:2780:39) at Object.invoke (/js/angular.js:2798:13) at /js/angular.js:2658:37 at getService (/js/angular.js:2780:39) 

At which point I'm lost. Is there any way to prevent AngularJS from rewriting URLs?

[Dario Gieselaar]

So, no one? This is pretty much a showstopper for us.

[Peter Bacon Darwin]

Can you provide some running code to see?  I am wondering if you are using HTML5 mode?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

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

[Yung H Kwon]

I was able to fix this by setting html5 mode false and setting hash prefix. But had to create the urls like `some/path/#!/#anchor_name`. Works fine, just not sure how much I like the look.

[Felipe Sabino]

I am not sure if I understand your problem, we have an issue that older URLs are still pointing to the web site, so we have to maintain the "#" urls working, but wanted to add the #! so that google crawler worked properly...

As I could not find a "angular way" of doing this and also keep the #! working so, the only thing that prevented this issue was to add the following script before angular bootstrap

if window.location.hash.indexOf('#/') == 0

  window.location.hash = '#!' + window.location.hash.slice(1)

[Mike Brennan]

I handled anchors a little different.

I created a method:

 $scope.scrollTo = function(id) {

    var p = $('#' + id);

    var position = p.position();

    window.scrollTo(position.left, position.top);

    }

Then you just do:

<a data-ng-click="scrollTo('tab-bar-top')" class="btn btn-default">Top</a>

Not a true anchor, but works for jumping around the page to a given ID...worked fine for my case, def won't work for all cases.

[Daniel Flores]

I still have this problem, actually I got to handle this using a little hack before AngularJS

var location = window.location.href;
var index = location.indexOf('#');

if (index > 0 && window.location.pathname == "/") {
   window.lastHash = window.location.hash;
   window.location.hash = "!";
}

But now I'm using jQuery.mmenu and it's menu items or main trigger use anchor links , I could bind an event trough jQuery but it seems very bad to do something that html does natively but AngularJS is breaking. How did you solve your problem ?