在 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 询问一个有效的 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 3

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

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

func1() {
  // something
}

func2() {
  // something
}

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

Answer 4

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

Answer 5

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

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.
其次，如果运行ning 你的 func2() 是有条件的，即它取决于 func1() 的输出，你可以决定是否运行 [=13] =] 与否。

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。

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

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

javascript

angularjs

angularjs-ng-click