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中声明了1个函数，而在JS中只声明了另外2个函数：

<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 code：

<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添加两个函数则要求您在{{{{}}中定义两个函数1}}。
其次，如果您的scope运行是有条件的，即它取决于func2()的输出，您可以决定是否运行func1()。

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指令中调用多个函数是否有缺点？

7 个答案: