<a> tags not working

[Pat Ferrel]

using 1.2.0-rc.3 but also in .2 

The app is very simple and 99% working. The only problem is that one page has perfectly good looking <a> tags with correct hrefs but most of them do not work. They change the url in the url-bar and when I then hit refresh the new page shows up but not until then. The one link that executes properly is a non-angular page but other non-angular link do not work.

I am not altering $location or the url bar in any of my code, there are no event handlers that I create, I'm not using a $routeProvider, the server is never getting a request, none of my controllers or services are being invoked and the page markup looks correct as far as I can see.   

Any ideas what I did to cause this?

[Pat Ferrel]

Created an issue for this #4543 https://github.com/angular/angular.js/issues/4543

Can't see how I could have caused this since it is purely client side bad behavior but anything is possible I guess.

[Pat Ferrel]

Tried removing jQuery, Bootstrap, all javascript except AngularJS 1.2.0-rc.3, app.js, controllers.js, and services.js.

When I load a template for search results the data is properly fetched and loaded into the page by Angular but the links don't work. They look fine in the final dom but when clicked they change the url bar but do not fetch the page. If you then hit refresh the page is loaded.

How could a click on a simple <a> tag change the url bar but not fetch the page? None of my code is fired when the click happens so Angular is changing the url bar, right? Either there is a bug in Angular or I did something to disconnect links from fetching resources.

Can someone please give me a hint where to start on this? 

--
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.
For more options, visit https://groups.google.com/groups/opt_out.

[OpenNota]

We cannot say much without seeing the code.

[Sander Elias]

Hi Pat,

did you read this in the documentation?

Without seeing your code, I'm guessing your doing something with your href using angular. The problem is probably there!

Regards

Sander

[Pat Ferrel]

Gists and code in the github issue. https://github.com/angular/angular.js/issues/4543

before javascript is fetched and executed: https://gist.github.com/pferrel/7073819

after javascript execution: https://gist.github.com/pferrel/7073845

Someone helped create a stripped down plnkr version but it does not repro there, which isn't surprising since there is a big part missing from it--the json fetch and response unwrapping on the client. Don't know how to mock that but since everything is fine until that point I suspect that is where the problem occurs--in the template rewriting or scripts attached by Angular. As I've said--even though it looks fine, the links only change the url bar. 

I've ripped out all other javascript but Angular and my controllers and services. I get no js exceptions.

In lieu of finding an obvious problem in my code, from the links above, I was hoping it might ring a bell for someone that would give me something to think about.

Thanks, yes, I read those docs and had already tried href and ng-href to no avail. I also read that mucking with $location would change the url-bar but not fetch a page--however I do not change $location in my code. I use an identical version of the template for the index operation, except with a different controller to fetch json, and the links work there.

[Pat Ferrel]

I've found a work around--finally!

instead of:

<a ng-href="/guides/{{video._id}}">

I use:

<a ng-href="/guides/{{video._id}}" data-method="get">

I noticed that the only link that worked had data-method="delete". Is this a bug? For a simple show or index you shouldn't need to specify the http verb, should you?

[Pat Ferrel]

I ran into this again! I've used ng-href (and regular href at one point) to create an <a> tag. The href is correct after all JavaScript is loaded and executed, when I click in the debugger is goes to the correct page but clicking the tag on the Agnular page only changes the URL bar it does not trigger the new page load. 

It is so far impossible to get this to reproduce in a jsfiddle I think because the error occurs in loading the json into the template, which comes from a $resource.query() index operation. When the Angular template is filled in with the model from the server it takes the URL for each index element and puts them in the template.

Before Angular fills in the template:

    <div class="video_thumb" ng-repeat='video in videoSearchPager.videos'>

        <a ng-href="/guides/{{video._id}}"><img .../></a>

    </div>

After Angular fills in the template:

    <div class="video_thumb ng-scope" ng-repeat="video in videoSearchPager.videos">

        <a ng-href="/guides/5226408ea0eef2d029673a80" href="/guides/5226408ea0eef2d029673a80">

              <img ng-src=.../>

        </a>

       other a tags...

    </div>

a full gist here: https://gist.github.com/pferrel/7304968

Note that the <a> tags that are static, not filled in from the model operate properly. The Sign Out, and Menu Bar links for instance work correctly. The work-around mentioned below--to add a data-method="get" to the tag does not work. So I'll have to put in an ng-click function I suppose to work around this time. This is really causing problems, I have a lot of index type views.

Any ideas where to look for a solution? 

[Mark Volkmann]

I think you shouldn't use both the ng-href and href attributes on an "a" tag. When the URL is static, I think you should only use href. Then you need to stop AngularJS from treating the "a" tag as a directive that it will attempt to process with the routes you have defined. To do that, add a click listener to that "a" tag and call event.preventDefault() in the listener.

--

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.
For more options, visit https://groups.google.com/groups/opt_out.

--
R. Mark Volkmann
Object Computing, Inc.

[Daniel Tabuenca]

He's not using both, that's just what it looks like when ng-href gets rendered. Have you by any chance configured your $locationProvider to html5Mode? If yes this would cause your problems. You could force it to always go to the url by adding target="_self" to your <a> tag. Give it a shot.

[Pat Ferrel]

Can’t thank you enough. Your fix works.

correct on both.

only ng-href in template

yes configured to HTML5 mode, I didn’t want to use #! routes. 

Could you explain why this happens? Maybe I missed some docs? I’m using an HTML5 shim for IE so was thinking I’d be as safe as I need to be but didn’t expect this. Am I doing something wrong?

[Daniel Tabuenca]

You said you weren't using a $routeProvider, so I interpreted that to mean you were not using angular router at all If you're not using angular router then leave $locationProvider alone.  The behavior you are seeing is documented here:

http://docs.angularjs.org/guide/dev_guide.services.$location

Under "Html link rewriting".

[Pat Ferrel]

I wasn’t using routeProvider until now, it was just there for later use. In this case the destination of the link in the search results is an Angular partial template and so should use the routeProvider. I see what you are saying and read this before but obviously didn’t understand the impact of rewriting vs reloading. 

It looks like with HTML5 mode the target=“_self” is only needed if I want to do a complete page reload. This was not my intention so I must have a further bug in binding the partials to the view. 

Back to the example app, thanks.

[Daniel Tabuenca]

If you could somehow capture the issue you are having in jsfiddel or plunkr, it would mkae it easier to help you debug it. Could you post what your route setup is?