7

I noticed this on two of my projects where I'm using AngularJS, so I'm assuming it's an issue with AngularJS.

Let's say I have a button on the menu that says "Register" and takes me to /account/register page. But, if I'm on the /account/register page, clicking the button won't refresh the page. It's like the button is disabled. This is always happening when the link I want to click has the same URL as the current page I'm on. The URLs are simple <a href="something1/something2">Link</a>. How can I remove this behavior?

Andrej
  • 415
  • 1
  • 7
  • 25

5 Answers5

8

Had the same problem with angular, adding target="_parent" attribute to the link made it work.

Pavel M.
  • 374
  • 6
  • 7
  • 2
    Verified with AngularJS v1.4.7. This fixed the same exact problem I was having inside my navbar, which is included in all my pages via `ng-include`. – user256430 Apr 13 '16 at 02:58
2

For who didn't understand, I have recorded my screen to display this issue. Basically, there are somethings wrong of Angular.

Zone not loaded

  1. If we place the navigation outside of the ng-app.
  2. The app has already loaded.
  3. Then we click again to this navigation.
  4. The app will disappear with no reason.

I fixed it by adding target="_parent" or target="_self" attribute to the anchor tag as answered above.

Check more on Angular docs

trungk18
  • 19,744
  • 8
  • 48
  • 83
1

You can check if the current url/state/hash is "/account/register" ... if yes then use reload method of the $route service.

AngularJs: Reload page

Community
  • 1
  • 1
Saurav
  • 61
  • 3
  • The register link that I'm talking about is not in any Angular Controller, it's just a link in the menu. But, it's under ng-app. This is also happening if the link is under some Angular Controller. – Andrej Jul 03 '14 at 09:44
  • Then you might need to listen to 'locationchangestart' event of the $route service. Can you please paste a sample snippet? – Saurav Jul 03 '14 at 09:52
  • 1
    I'm not using $routeProvider nor $locationProvider, it's not a single page application. – Andrej Jul 03 '14 at 09:57
0

I didn't find any reasonable way to check the path inside view, but this could work:
view:

<a link-href="path/to/same/location">same location</a>

directive:

app.directive('linkHref', ['$location', '$route', function ($location, $route) {
  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
      $element.bind('click', function () {
        if ($location.$$url == $attrs.activeLink) {
          $route.reload();
        } else {
          $location.path($attrs.activeLink);
      });
    }
  };
}]);
Reyraa
  • 4,174
  • 2
  • 28
  • 54
0

I had the same problem and found that if I removed $location (wasn't using anyways) that was listed in a factory the problem went away.

howardlo
  • 1,401
  • 1
  • 15
  • 20