如何在 ONE ng-click 中添加许多功能？答案

【问题标题】：How to add many functions in ONE ng-click?如何在 ONE ng-click 中添加许多功能？
【发布时间】：2013-05-24 17:12:07
【问题描述】：

我一直在寻找如何执行此操作，但到目前为止我找不到任何相关内容，:( 我可以嵌套两个函数，是的，但我只是想知道这是否可能？我想从字面上做到这一点：

<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>

我此刻的JS代码：

$scope.open = function () {
  $scope.shouldBeOpen = true;
};      

$scope.edit = function(index){

  var content_1, content_2;
      content_1 = $scope.people[index].name;
      content_2 = $scope.people[index].age;

  console.log(content_1);
};

我想一键调用两个函数，如何在angularJS中做到这一点？当你添加多个类时，我认为它会像在 CSS 中一样直接......但它不是:(

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你有两个选择：

创建包装这两种方法的第三个方法。这样做的好处是您在模板中放置的逻辑更少。
否则，如果您想在 ng-click 中添加 2 个调用，您可以添加 ';'在edit($index)之后这样

ng-click="edit($index); open()"

请看这里：http://jsfiddle.net/laguiz/ehTy6/

【讨论】：

我使用了方法二（它可以满足需要），但是有什么原因不在一个ng-click 中有两个调用？
这就是为什么我给出了 2 个选项。就我个人而言，我更喜欢将调用包装在我的控制器中，但这取决于你。
选项 2 没有问题，但选项 1 更简洁，因为您应该避免在视图中添加代码和逻辑。如果您将来需要修改某些内容，那就更好了。
在我自己的情况下，选项 2 意味着避免在指令中添加通用函数，这可能会更慢并且更难维护。
选项 1 还为您提供了另一个必须测试的不必要功能

【解决方案2】：

你可以用';'调用多个函数

ng-click="edit($index); open()"

【讨论】：

【解决方案3】：

很多人使用（点击）选项，所以我也会分享这个。

<button (click)="function1()" (click)="function2()">Button</button>

【讨论】：

使用 (click)="function(); function2()" 也可以。我刚刚发现并想分享。
我发现这在绑定到keyup.enter 时很有用。 ; 分离不起作用，因为方法并不总是按顺序执行。

【解决方案4】：

添加多个函数的标准方法

<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here</button>

或

<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here</button>

【讨论】：

【解决方案5】：

试试这个：

制作函数集合
创建一个循环并执行集合中所有函数的函数。
将函数添加到html中

array = [
    function() {},
    function() {},
    function() {}
]

function loop() {
    array.forEach(item) {
        item()
    }
}

ng - click = "loop()"

【讨论】：

【解决方案6】：

关注下方

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}

【讨论】：

【解决方案7】：

ng-click "$watch(edit($index), open())"

【讨论】：

这里的语法不正确。如上所述，分号是分隔符；不是逗号……除此之外……