在ng-click指令中调用多个函数是否有缺点？

Question

我们在一个ng-click指令中调用两个函数，有没有我们应该知道的问题？

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

我们也可以调用一个调用这两个函数的函数：

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

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

$scope.func2(){
 //something
}

Answer 1

没有区别，它们都可以和另一个（在我看来更好）选项一样有效

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

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

Answer 2

在一次ng-click中调用两个函数是一种不好的做法。 当您决定要添加第三个功能时会发生什么？ 如果您只希望在满足某个条件时发生第二个功能，该怎么办？ 在您的演示代码中添加超出必要的逻辑是关注点分离不佳。

Answer 3

是的，第一种方法是正确的。 ng-click询问一个有效的AngularJS expression并进行评估，无论是单个函数还是多个函数，还是任何其他表达式，如"anyVar = 'Button Clicked'"

以下这些例子都是正确的

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

要么

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

Answer 4

两种方式都没有问题，但我只在$scope声明了一个函数，而在JS中只声明了另外两个函数：

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

func1() {
  // something
}

func2() {
  // something
}

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

Answer 5

所有方法都是正确的。 但是我们可以将这两个函数func1()和func2()作为JS函数而不是scope函数，并使用ng-click在新的作用域函数中调用它们。

HTML代码：

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

控制器代码：

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

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

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

与在ng-click上添加两个函数相比，此实现具有一些优点

• 首先，它减少了观察者的数量，因为我们只有一个 scope函数，而向ng-click添加两个函数需要您在scope定义两个函数。
• 第二，如果运行你的func2()是有条件的，即它依赖于func1()输出，你可以决定是否运行func2() 。

Answer 6

没有没有缺点，但这不是一个好的做法...无论你是在ng-click内部调用函数还是在控制器中的另一个函数内部都没有区别。 如果你在ng-click中调用函数，那么它们将按顺序调用它们在那里写入。

例如：func1（）将首先调用然后调用func2（）...

Answer 7

不，在ng-click中调用多个函数没有任何缺点，但我们必须在大多数时候忽略它，因为这不是一个好习惯。

您可以通过调用另一个函数内的函数来实现此目的。

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

所以这里func1首先调用，然后调用func2和func3。