如何在 ng-click 上堆叠多个 actions/functions？

Question

这是我当前的 ng-click：

ng-click="avatarMenu = !avatarMenu"

<div class="avatar"
     ng-click="avatarMenu = !avatarMenu"
     ng-class="{ active: avatarMenu }">
     <img src="_sources/images/joe.png" title="settings" alt="user avatar" />
</div>

现在我想创建一个 $scope 函数，它在您单击该元素时执行其他操作，尝试了以下操作，但出现错误：

ng-click="avatarMenu = !avatarMenu, getMenuClick('clicked')"

还尝试将 animation/boolean 逻辑移动到我的 app.js 中的函数中，但未定义 avatarMenu，猜测因为它不再位于 HTML 上：

$scope.avatarMenu = false;

$scope.avMenu = {};
$scope.avMenu.getMenuClick = function(the_id) {
    avatarMenu = !avatarMenu
    selectAddress(the_id);
};

你如何让 animate/boolean 登录和功能一样？

Answer 1

使用分号，而不是逗号。

avatarMenu = !avatarMenu; getMenuClick('clicked')

Answer 2

Controller 函数中定义的 ViewModel 变量需要在 $scope 参数上声明（就像您所做的那样），或者，如果您使用 Controller As 方法 - 作为 Controller 的属性。

因此，使用 $scope-approach:

$scope.avatarMenu = ...;
...
  $scope.avatarMenu = !$scope.avatarMenu;

并在视图中：

<div ng-class="{ active: avatarMenu }">

或者，使用 ControllerAs-approach:

this.avatarMenu = ...;
...
   this.avatarMenu = !this.avatarMenu;

在视图中：

<div ng-controller="MyCtrl as vm">
   ...
   <div ng-class="{ active: vm.avatarMenu }"></div>
</div>

请记住，归根结底，Controller 只是一个常规的 JavaScript 函数，后面没有任何 "magic"。

此外，正如另一个答案中所建议的，您也可以使用分号 ; 来分隔视图中的命令，但我会尽量减少视图中的逻辑量。

如何在 ng-click 上堆叠多个 actions/functions？

How to stack multiple actions/functions on ng-click?

javascript

angularjs

angularjs-ng-click