Trigger a function using ng-click and only execute the second function if the condition is met

Question

Trigger a function using ng-click and only execute the second function if the condition is met

Currently in the process of validating a form with a function called "myFunction".

<button class="btn btn-lg btn-primary btn-block" type="submit" ng-click='form.$valid && myFunction()'>SEND</button>

The function should only run when the button is clicked and the form is valid, meaning when:

Form.$valid == true.

Additionally, there is another function named "directive_function()" that needs to be executed every time the button is clicked, but it should only run if the condition is met.

I have the requirement to implement this directly in the HTML view without any interference with the controller. How can I achieve this?

This is roughly what I am looking for:

ng-click='directive_function(); form.$valid && myFunction()'

http://jsfiddle.net/4973nesL/

javascript angularjs

Answer 1

Answer №1

It's not recommended to handle this task in the view layer. To improve your code structure, consider moving the logic into the controller. Here is an example:

<button ng-click='directive_function();'>SEND</button>

In your controller file:

directive_function() {
  if(...) {
    // Only call the function if the condition is satisfied
    myFunction();
  }
}

Answer 2

It's not recommended to handle this task in the view layer. To improve your code structure, consider moving the logic into the controller. Here is an example:

<button ng-click='directive_function();'>SEND</button>

In your controller file:

directive_function() {
  if(...) {
    // Only call the function if the condition is satisfied
    myFunction();
  }
}

Trigger a function using ng-click and only execute the second function if the condition is met

Answer №1

Similar questions

Is it possible to execute a program on MacOS through a local HTML website?

Accessing BIM Components: Identifying Global and Express IDs through Selection

Engaging User Forms for Enhanced Interactivity

Express is encountering a non-executable MIME type of 'text/html' with Webpack

The three.js raycaster is able to detect objects both in front of and behind the specific object I am trying to select

Using Passport authentication callback rather than redirecting the user

The value of element.scrollTop is consistently zero

What is the best way to determine when a user navigates away from a template or page in Angular

Is onMouseLeave failing to trigger upon exiting an element?

The function and if-else statement are experiencing malfunctions

What are the steps to troubleshoot and fix the Internal Server Error on Next.Js?

Revamping tree organization with Accelerando

Discover the technique for splitting a string using jQuery with multiple strings as separators

Exploring the concept of recursive method calls in TypeScript

The magic of $.ajax lies in its ability to load an unexpected URL, diverging from my original

Error message: Electron is unable to read properties of undefined, specifically the property 'receive'. Furthermore, the IPC is unable to receive arguments that were sent through an HTML iframe

Failure to achieve success with jQuery Ajax

Is there a way to receive a JSON request in Express delete using Restangular?

Javascript: Executing a interval, delay, and another interval

Recaptcha Request exceeded time limit within the bootstrap modal dialogue box