AngularJS Directive and jQuery DOM Event Binding

Question

i've created a directive and i'm not quite sure about the binding like element.bind("click", function(){}). The link function of each directive gets called multiple times and each call will produce a duplicate binding. What is the most Angular way to accomplish this (even the click binding is available as attribute) ?

var globalCounter = 0;
app.directive("myDirective", function()
{
    return {
       link: function(scope, element) {
          globalCounter++;
          $(element).bind("click", function () {});
       }
    }
});

The globalCounter variable (and the click bindings ?) will increase every time i change the ng-view to a different template.

Maybe the element gets destroyed and the binding with it, i'm not sure, maybe this is my answer.

pls post fiddle or plunker of demo you have tried

Ajay Singh Beniwal
– Ajay Singh Beniwal

2013-09-24 10:49:37 +00:00
Commented Sep 24, 2013 at 10:49 — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Sep 24, 2013 at 10:49

Chandermani · Accepted Answer · 2013-09-24 11:09:19Z

1

Your assumption are not completely correct. The directive link function gets invoked once per directive declaration. So the element on which click is getting attached is different. Therefore each function is acting on a different control.

You can still do css selector based click action binding, but then the directive should be defined on the parent.

Also when the view changes the DOM is destroyed and hence you old binding will get removed.

answered Sep 24, 2013 at 11:09

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

defau1t · Accepted Answer · 2013-09-24 11:00:19Z

1

I think you can set a restrict config option

First, we’re setting the restrict config option. The restrict option is used to specify how a directive can be invoked on the page.

As we saw before, there are four different ways to invoke a directive, so there are four valid options for restrict:
'A' - <span ng-sparkline></span>
'E' - <ng-sparkline></ng-sparkline>
'C' - <span class="ng-sparkline"></span>
'M' -

http://www.ng-newsletter.com/posts/directives.html

answered Sep 24, 2013 at 11:00

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

1 Comment

MR.ABC Over a year ago

Just left this to make this example more simple.

kubuntu · Accepted Answer · 2013-09-24 11:02:33Z

1

You did not put the counter in the click event. Also, you do not need jQuery selector for the element that has the directive.

app.directive("myDirective", function()
{
    return {
       link: function(scope, element, attrs) {
          element.bind("click", function () {
             // Click event here
          });
       }
    }
});

answered Sep 24, 2013 at 11:02

kubuntu

2,5351 gold badge24 silver badges24 bronze badges

2 Comments

MR.ABC Over a year ago

its still the same problem. The link function gets called multible time. Each time a new bind is done to the element...

kubuntu Over a year ago

How are you binding it to the element? Can you show the HTML snippet containing the directive?

Pavlo Datsiuk · Accepted Answer · 2013-12-12 14:01:13Z

0

i wrote little example of this derective https://github.com/JTOne123/angularJs.elementReady/blob/master/src/onElementReady.js and fix here some problems with scope

answered Dec 12, 2013 at 14:01

Pavlo Datsiuk

1,1261 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive and jQuery DOM Event Binding

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related