Extending ngClick for adding additional function

Question

Hello all there is any way to extend the inbuilt directive?

This is what I want to do.

For example my directive template is :

    <div ng-click="condition && handleClick()" ng-transclude></div>

here condition is whether to perform the click to the div or not so when I reused the directive and make it nested I end-up like this.

note : the condition in my directive will not change dynamically this is just one time value.

    <div ng-click="condition && handleClick()">
        <div ng-click="condition && handleClick()">
            <div ng-click="condition && handleClick()"></div>
        </div>
    </div>

So now the problem is if ng-click is added to the div angular binds the touchstart or click and others to the div, I want to avoid this bindings, due to this bindings many unnecessary events are added to the div which is not needed.

Now I want to extend the ng-click directive and need to add the condition check before binding the events with the element, if the condition is false I will not bind the event else if it true I will bind the event.

For fixing this I can write my own directive ng-click-condition and perform same operation as ng-click but with condition check but if I do this I will be lead to code duplication and maintainability issue, so I am finding some way to reuse the in-built directive.

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

If I understand what you are trying to do correctly, you should package all this logic inside the directive.

Set the scope of the directive to scope: {} (scope: true, may work as well. Just as long as each directive gets it's own scope)

Inside the link function of your directive:

element.bind('click', function() {
  if (condition) {
    //do something awesome
  }
})

Or if you want to avoid the bindings unless the condition is met, just reverse the binding. But I would still put it in the directive:

if (some condition) {
  element.bind('click', function() {
    //do something awesome
  })
}

Binding click and touchstart: How to bind 'touchstart' and 'click' events but not respond to both?

EDIT: Still not quite sold on needing to extend ng-click. How about just conditionally adding ng-click?

Dynamically add angular attributes to an element from a directive

Angular directive how to add an attribute to the element?

edited May 23 '17 at 12:16

Community

1
1

answered Apr 25 '15 at 04:56

tpie

6,021
3
22
41

thanks for your answer, as you mentioned my all of my directives have own scope, i don't want to do as you mentioned in your answer because i don't want to bind the events myself because ng-click has good event control on touchscreen and non touch screen, so i want to reuse the ng-click but i don't want to duplicate the code. – sreeramu Apr 25 '15 at 05:01
my application is for both touch screen and non touch screen, ng-click handles both the condition and handles more then this like different browser compatibility and ghost click etc, so i want to use the ng-click with this condition. – sreeramu Apr 25 '15 at 05:29
Why wouldn't conditionally adding the ng-click to the element work? – tpie Apr 25 '15 at 05:42

Extending ngClick for adding additional function

1 Answers1