Directives

A directive can be considered as a very important part of the core of Angular. Directives extend the functionality of HTML using a new syntax. With it we can use logic that will be executed in the DOM

Client Click

Adds supports for Button and LinkButton [System.Web.UI.WebControls.IButtonControl] OnClientClick property.

Reference documentation:

• Button OnClientClick

• LinkButton OnClientClick

Implementation Details

Directive Selector: ‘wmClientClick’

Client Click scenarios

Scenario 1 - Regular JS code:

onClientClick = 'console.log();'

Scenario 2 - Function call:

onClientClick = 'download()'

Scenario 3 - JS code or function call using 'return':

onClientClick = 'return myFunction()'

If the onClientClick script doesn't include a 'return', it will always trigger the Control's Click event and if the Control is inside a GridView or a DataList, it will also trigger the RowCommand or the OnItemCommand respectively. In case the script includes the 'return', it may or may not trigger the events, depending on the result. For example, in the 3rd case scenario, if myFunction() returns true, it will trigger the events.

PME Support

Properties

Property	Details
onClientClick: string	Used to save the onClientClick script.
eventsContext: any	Used to save the context of the events. If the onClientClick script is a function call, the directive will validate and look for a method in this context to be executed.

Methods

onClientClickHandler

This handler validates the different scenarios and executes the onClientClick script and triggers the click events if necessary.

getClientClickFunction

In case the onClientClick script is a function call, this method needs to be called. It returns an arrow function with the correct parameters and context, ready to be executed.

triggerClickMechanism

Triggers the control's click and the GridView or DataList command.

executeAsJSCode

Executes JS code that doesn't have a reference to any function. For example: console.log(); var x=2; return true;

getFunctionParams

Returns a string array with all the parameters in the onClientClick script function. For example: getFunctionParams('myFunction('param1')') => returns ['param1']

setThisContext

Sets the context if we have a 'this' reference in the function parameters. For example: setThisContext(['this', 'param1'], myContext) => returns [myContext, 'param1']

*The context is been set as event.target in the getClientClickFunction method.

Reference to the complete directive documentation: ClientClickDirective