Href Overrides Ng-Click in Angular.Js

href overrides ng-click in Angular.js

You should probably just use a button tag if you don't need a uri.

Href override parent ng-click in Angularjs

I'm not sure what is your doSomething() function ie. what you are doing in there but this could be a solution for you.

$scope.doSomething = function(event) {
  if (event.target.nodeName === 'A' || event.target.tagName === 'A') {
    console.log('target was <a>');
  } else {
    console.log('target was not <a> - do something');
  }
};

Html:

<table>
  <tr ng-click="doSomething($event)">
    <td><a href="http://google.com" target="_blank">blablabla</a></td>
  </tr>
</table>

So you check if the clicked element is a anchor link or not and do stuff based on that. You can obviously make this fit a lot of different situations.

EDIT:

You can read about tagname vs nodename and decide how you want to do it.

href and ng-click do not work in the same tag on Mobile

I have run into the same issue and found the answer here.

In a nutshell, you can have multiple directives with the same name and both will get run when they are called. this allows you to write a custom directive, also called ng-click, which requires less work than going through all of your links and moving the redirect to the function called by ng-click.

Here's the code:

angular.module('ngClick', function( $location ) {
  return {
    link: function(scope, elem, attrs) {
      if(attrs.href) {
        elem.on('touchend', function() {
          $location.path(attrs.href);        
        });
      }
    },
    priority: 1
  };
});

For me, it was simple enough to move the redirect into my function and redirect the page using $location:

$location.path('www.my-link.com');

Use href with ng-click

You have to prevent the default action when you trigger the ng-click. You can do that by passing the $event object of the ng-click directive:

<a ng-click="OpenSubsite($event, singleitem.Id)">..</a>

Then in the controller:

$scope.OpenSubSite = function(ev, id) {
    ev.preventDefault(); // prevent it opens default

    $scope.LoadItem(id);

    return false;
}

Ng-Click vs Href: Which takes priority?

There is no case of priority here between href and click event (unless you are talking about the priority of default action of anchor and click event). ng-click is a directive which just underneath registers event handler to the DOM element and when you click on it, click event is getting triggered. The default action (browser's) of an anchor is to navigate to the url (if present, absolute or relative) specified in the href. And click of an anchor triggers default action to occur unless it is prevented by event.preventDefault() or return false(won't work with handlers registered with angular) (which does not work with angular), which is probably what you are look for.

In angular you can pass the event from ng-click as ng-click="func($event)" and you can use that in your handler or you can even use it inline.

From W3c

Some events are specified as cancelable. For these events, the DOM implementation generally has a default action associated with the event. An example of this is a hyperlink in a web browser. When the user clicks on the hyperlink the default action is generally to active that hyperlink. Before processing these events, the implementation must check for event listeners registered to receive the event and dispatch the event to those listeners. These listeners then have the option of canceling the implementation's default action or allowing the default action to proceed. In the case of the hyperlink in the browser, canceling the action would have the result of not activating the hyperlink.

Cancelation is accomplished by calling the Event's preventDefault method. If one or more EventListeners call preventDefault during any phase of event flow the default action will be canceled.

AngularJS - how to override directive ngClick

You can't override AngularJS built-in directives. However, you can define multiple directives with the same name and have them executed against the same element. By assigning appropriate priority to your directive, you can then control whether your directive runs before or after a built-in directive.

This plunker shows how to build an ng-click directive that executes before the built-in ng-click does. The code is also shown below. When clicking the link, the custom ng-click will run first, then the built-in ng-click does.

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    <a ng-click="alert()">Click me</a>
  </body>

</html>

script.js

angular.module('app', [])
  .directive('ngClick', function($rootScope) {
      return {
        restrict: 'A',
        priority: 100, // give it higher priority than built-in ng-click
        link: function(scope, element, attr) {
          element.bind('click', function() {
            // do something with $rootScope here, as your question asks for that
            alert('overridden');
          })
        }
      }
  })
  .controller('MyCtrl', function($scope) {
    $scope.alert = function() {
      alert('built-in!')
    }
  })

---

Related Topics