<a> tags disabled

[pferrel]

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. When clicked they change the url in the url-bar and when I then hit refresh the new page shows up and all the correct code is executed. The one link that executes properly is a non-angular page on the same site 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.

Not sure how I could have caused this but no doubt it's possible.

[caitp]

Could you possibly post a reproduction of this to plnkr or gist? Thanks.

[pferrel]

Be happy to but there are a lot of moving parts. Unless you want something specific I'll start with the actual page contents where the links do not work?

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

If you click:

   <a href="/guides/522649a9a0eea05c613881bd">
       <img ng-src="/uploads/video/poster/522649a9a0eea05c613881bd/large_thumb_10871649_det.jpg" src="/uploads/video/poster/522649a9a0eea05c613881bd/large_thumb_10871649_det.jpg">
   </a>

it loads the href into the url bar and nothing more. Then if you refresh the browser the correct resource is displayed.

The pre-javascript markup for this link is:

<div ng-controller="VideoSearchResultsCtrl" class="row-fluid">
  <div class="span12" >
    <div class="video_thumb" ng-repeat="video in videos">
      <p>
        <a href="/guides/{{video._id}}">
          <img ng-src="{{video.large_thumb}}">
        </a>
      </p>
    </div>
  </div>
</div>

if you click:

<a href="/users/logout" data-method="delete" rel="nofollow">Sign out</a>

the link works but other non-angular page links do not

[caitp]

I've created a (basic) reproduction of what you're describing, using RC3: http://plnkr.co/edit/mRZREc95c5rXWvgBzo7w?p=preview

Clicking the link appears to work correctly, as far as I can tell. I think there's likely something else going on on your page which is causing your issue. If you can create a consistently reproducible test-case I'm happy to debug it and see what the issue is.

[pferrel]

OK, thanks, I can believe that but there is a big difference from your plnkr and the gist.

If it is in some inter-script interference maybe we can narrow down the differences. I took out jQuery and Bootstrap. There is no code in any of my js files except app.js, controllers.js, and services.js.

I still get the behavior on that page. So that means it is in my js or angularjs.

In the controller that fills in that page template I use jQuery and $location so I hard-coded the query route to get some data and took out jQuery and $location. It still has the same behavior. Here is my controller:

GuideControllers.controller('VideoSearchResultsCtrl', ['$scope', '$location', 'VideoSearch',
    function($scope, $location, VideoSearch) {
        /*var route = jQuery.extend(
            { namespace: "api", resource: "videos", action: 'search' },
            $location.search()
        );
        $scope.videos = VideoSearch.query(route);*/
        $scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: 'search', q: 'angry' });
    }
]);

var VideoSearchServices = angular.module('VideoSearchServices', ['ngResource']);

VideoSearchServices.factory('VideoSearch', ['$resource',
    function($resource){
        return $resource("/:namespace/:resource/:action", {namespace: "@namespace", resource: "@resource", action: "@action"}, {
            query: {
                isArray: true,
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest"
                }
            }
        });
    }
]);

After the results are fetched there is only AngularJS since I have no directives, right? So if it's me it has to be in the markup or the above code. I'll see if I can create a plnkr that repros this but it sure has me stumped. The plnkr will never be able to get the service data and unroll the response so I don't think I can include that part.

[pferrel]

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?

[pferrel]

I ran into this again and adding a data-method="get" to the tag this time does not work-around the problem!

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. Hitting "reload" then displays the correct page.

I can't reproduce in a jsfiddle because the problem occurs when loading the json into the template from a $resource.query() operation. When the Angular template is filled in with the model data from the server it takes the id for each index element and uses the id to construct a URL for the ng-href but even though the href is correctly created by Angular the <a> tag never becomes active.

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 through the controller's VideoSearch.query() request:

    <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 of the final markup is here: https://gist.github.com/pferrel/7304968
gist of the controller for this page here: https://gist.github.com/pferrel/7305338

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 before--to add a data-method="get" to the <a> 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? What could cause the <a> tags to not work properly even though the final markup looks correct?

[pferrel]

Yikes, even this does not work:

<span ng-click="location.href='/guides/{{video._id}}';"  >
     <img ng-src=...>
</span>

[pferrel]

The problem was that I had the $locationProvider set to HTML5 mode. I had to put a target="_self" in the A tag. Then it worked. Not sure why, still researching. If it's my bad I'll close this issue.

[btford]

Angular expressions are sandboxed for security reasons. You can't get ahold of window.location unless you attach it to a $scope. And you'd probably want to use $location instead.