Get value of clicked nested element with element.bind

Question

I am using the following code in my directive and it always seems like the click is not able to keep track of my $location.$$path very well. This plug-in I am using is also using the <li></li> as a clickable item with a path which may be causing the issue. So my question would be if there a way I can skit the out elements and just focus down on the <a href="#myValue> which is a child of that <li> ?

.directive('treeClick', function ($location) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          element.bind("mousedown", function () {
            console.log($location.$$path);
          })
        }
    }
  })

<li class="list-group-item node-tree node-selected" data-nodeid="2" style="color:#000;background-color:#eaeaea;"><span class="indent"></span><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span><a href="#myValue" style="color:inherit;">Example1</a></li>

Answer 1

I'm thinking that for what you're trying to do, you're using the wrong event. What if you tried mouseup instead of mousedown (you might also need to $timeout your processing if the update to the url is asynchronous, but I'm thinking it's not)?

Couple more things.. Angular exposes an event for when the location changes named $locationChangeSuccess

And.. $$path is an internal property, why not use the documented $location.path()

https://docs.angularjs.org/api/ng/service/ $location

Answer 2

event.target.nodeName gave me what the element was: "A" for anchor "LI" for list item. I then extracted the value of the "A" by using event.target.nodeName.getAttribute("href"); so that I do not get the host name in the console.log()