[AngularJS] Angular JS Right Click and Unsorted List - Directive is running multiple times.

myApp.directive('ngRightClick', function ($parse) {

    return function (scope, element, attrs) {

        var fn = $parse(attrs.ngRightClick);

        element.bind('contextmenu', function (event) {

            scope.$apply(function () {

                event.preventDefault();

                fn(scope, { $event: event });

                console.log(event)

            });

        });

    };

});

I have a directive that I found online as an example for right clicks. I also have a treeview directive, and it uses a template.

            var template = '<ul ng-right-click="theclick(this)">' +

                '<li  data-ng-repeat="node in ' + treeModel + '">' +

Depending on my nesting, i could have lets say 5 levels of folders.

 

1

----2

--------3

------------4

----------------5

1.2

-----1.3

Lets say i click on 4.

For some reason the console.log returns 4, 3, 2 and 1.

I am unsure on how not make it iterate through every single parent node.

This is normal behavior. What happens is that your event bubbles up to the root of the document. While doing that, every affected event handler on its way will get triggered.
If you want to prevent that, you have to stop the event yourself. You can do that in the template, or in your won code.

Adding this to your template will stop the event: $event.stopPropagation()