Href overrides ng-click in Angular.js

Smooth cohabitation of ng-click and href

To orchestrate a frictionless integration of both attributes, consider employing these techniques:

Utilizing ng-href for dynamic URI

Opt for ng-href over href when assigning dynamic URLs. This guarantees the hyper-reference remains unusable until the Angular.js variable populates it, avoiding premature navigation:

// "URI made me do it" - ng-href
<a ng-href="{{url}}" ng-click="yourFunction($event)">Navigate</a>


Prioritizing with directive command

Craft a custom directive where ng-click takes the front seat, and invoke $location.path() within your function to control navigation:

app.directive('myDirective', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function($event) {
        $event.preventDefault();
        // "Just following orders" - scope
        scope.$apply(function() { 
          scope.yourFunction(attrs.ngClick);
        });
      });
    }
  };
});


Opting for button element

Where actions are not naturally link-related, choose the button element instead. Preserve the URL in a data attribute if need be:

<button ng-click="yourFunction()" data-url="/path">Click me</button>


Harmonizing with Bootstrap compatibility

When merging with Bootstrap, retain the href in anchor tags for stylistic purposes. Use ng-click to redirect the action:

<a href="#" ng-click="yourFunction($event); $event.preventDefault()">Click me</a>


Visualizing the process

Let's imagine train tracks (🛤️) showing a junction switch (🚦) for clarity:

🛤️ Track A: ng-click event 🚶‍♀️
🛤️ Track B: href navigation 🚆
🚦 Switch: Directive in Angular.js

Understand that when ng-click and href merge, the href acts like a train (🚆) which plows through the pedestrian (🚶‍♀️) trying to cross the track:

🚆=href ➡️🛤️ Track B : Path taken, IGNORES 🚶‍♀️=ng-click

Switching Directive (🚦) can direct the control:

🚦 Set to `ng-click`: Event wins, leaving 🚆=href at a halt.
🚦 Set to `href`: Navigation takes place, and 🚶‍♀️=ng-click waits.

Take home: configuring the switch (Angular directive) correctly is vitally crucial for ng-click to supersede href.

Navigating accurately with Angular.js

Angular.js provides tools to handle navigation nuances within your apps:

The power of $location service

For enforced navigation after actioning ng-click, make use of Angular's $location service:

$scope.yourFunction = function() {
  // "No place like /newpath" - Dorothy (not from Wizard of Oz)
  $location.path('/newpath');
};


State maintenance with UI-Router

For those using UI-Router, use state transitions to navigate between views:

$scope.yourFunction = function() {
  $state.go('stateName');
};


Embedging URI in ng-click

Decentralize the URL management to the scope function and uncouple navigation logic from template:

<a href="#" ng-click="navigateTo('/path')">Click Me</a>


$scope.navigateTo = function(path) {
  // "Because I said so" - $location.path
  $location.path(path);
};
