Angular js directive dynamic template binding

Question

I have a template which looks like:

scope:{
  localClickFunc: "&click",
  myLocalDbClickFunc: "&dblclick"
} ...

 <myButton  ng-click="localClickFunc($event)" ng-doubleckick="myLocalDbClickFunc($event)"/>

there are many other events (mouseover etc)

my localClickFunc are binded in scope directive with controller functions(they could be binded with "=" for my case It doesn't matter).

The problem is that in the usage of this 'myButton' directive not all attributes are necessary .If I use it with all the other events will get registered and fired through angular to a noop function.

I can have as many as 1000 buttons on the screen .What would be the solution to this ?. Are there conditional templates ?

Nikos Paraskevopoulos · Accepted Answer · 2013-10-10 07:52:23Z

2

The ? in the scope binding definition makes the attribute optional.

However, function bindings (&) are always optional, as far as Angular is concerned. I.e. Angular will not complain if you do not specify a function in this binding and it will put a function in the scope of the directive anyway. So you cannot write if( scope.localClickFunc == null ) to check for its existence.

I would suggest to use the optional binding =? to specify the callbacks. This way you will be able to check the scope for the existence of the binding and, only if it exists, bind it to the actual DOM event. Example code:

scope:{
    localClickFunc: "=?click",
    localDbClickFunc: "=?dblclick"
},
link: function(scope, element, attrs) {
    ...
    if( scope.localClickFunc != null ) {
        element.on("click", scope.localClickFunc);
    }
    ...
}

Then use the directive as:

<myButton click="localClickFunc($event)"
          dblclick="myLocalDbClickFunc($event)"
/>

You can specify any or all of the attributes and the handlers will be installed accordingly.

edited Oct 10, 2013 at 7:52

answered Oct 8, 2013 at 11:30

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

7 Comments

Ovidiu Buligan Over a year ago

how can I turn that on-click to an ng click ?

Nikos Paraskevopoulos Over a year ago

Why would you want to do that? Perhaps the edit clarifies the intended usage.

Ovidiu Buligan Over a year ago

you mean <myButton click="externFunction" ...>. What I want is to conditionally add directives . I am seeing now the compile function if I can use it without performance impact on 1000 buttons

Nikos Paraskevopoulos Over a year ago

Perhaps you should also investigate setting a single event listener in the parent element of your list. This solution solves the "dont set noop handlers if the handler is not specified" problem.

Ovidiu Buligan Over a year ago

@NikosParaskevopoulos I see you have experience and interest in angular , can you tell me what will I lose if I switch to element.on('on') instead of using the angular ng-click?

|

bresleveloper · Accepted Answer · 2013-10-08 11:16:33Z

0

u can send the attr like say the directive name is mydir then and then in the link and compile functions one of the 3rd parameter is usually names as params and u get there by params.mydir (value will be ovidiu). you can send anything textbased like ';' seperated like "click;dbclick;onmouseout" and break it in the directive with params.mydir.split(';'). from there you can even go to groups of events like "allClicks", u just need in the link some dictionary or switch that will append the right stuff.

answered Oct 8, 2013 at 11:16

bresleveloper

6,0743 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular js directive dynamic template binding

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related