Is there a drawback of calling more than one function in a ng-click directive?

Question

We are calling two functions in a single ng-click directive, is there any gotcha that we should be aware of?

<button type="button" ng-click="func1(); func2();">Click</button>

We could also call a single function that calls the two function instead:

<button type="button" ng-click="func1()">Click</button>

$scope.func1(){
  func2();
}

$scope.func2(){
 //something
}

Answer 1

Doesn't make a difference, both of them works as well as another (and in my opinion better) option

<button type="button" ng-click="clickAction()">Click</button>

$scope.clickAction = function() {
    $scope.func1();
    $scope.func2();
};

Answer 2

Calling two functions in one ng-click is a bad practice. What happens when you decide you want to add a third function? What if you only want the second function to happen when a certain condition has been met? Putting more logic than is necessary in your presentation code is poor separation of concerns.

Answer 3

yes, first approach is correct. ng-click ask a valid AngularJS expression and evaluate the same, doesn't matter it's a single or multimple function or any other expression like "anyVar = 'Button Clicked'"

So these below examples are correct

<button type="button" ng-click="func1(); func2();">Click</button>

or

<button type="button" ng-click="anyVar = 'Button Clicked'; index++;">Click</button>

Answer 4

There's no problem with both ways, but I would declare only 1 function in $scope and another 2 functions only in JS:

<button type="button" ng-click="func3();">Click</button>

func1() {
  // something
}

func2() {
  // something
}

$scope.func3 = function() {
  func1();
  func2();
}

Answer 5

All the approaches are correct. But instead we can have those two functions func1() and func2() as JS functions instead of scope functions and call them both inside your new scope function using ng-click .

HTML code:

<button type="button" ng-click="click()">Button</button>

Controller code:

function func1() {
    // func1 code goes here
}

function func2() {
    // func2 code goes here
}

$scope.click = function() {
    func1();
    func2();
}

This implementation has a couple of advantages compared to adding two functions on ng-click

• First is, it reduces the number of watchers since we have only one scope function whereas adding two functions to ng-click requires you to define both the functions in scope .
• Second is, if running your func2() is conditional ie, it is dependent on output of func1() , you can decide whether to run func2() or not.

Answer 6

No there is no drawback, but it is not good practice... And there is no difference whether you are calling function inside ng-click or inside another function in controller. And if you are calling function inside ng-click then they will call in sequence in which they written there.

For example : func1() will call first then func2()...

Answer 7

No, there is no drawback of calling more than one function inside ng-click, but we have to ignore it most of the time because it's not good practice.

You can achieve this by calling a function inside another function.

<button type="button" ng-click="func1(); func2(); func3();">Click</button>

So here func1 will call first, then func2 and func3.