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')"

还尝试将动画/布尔逻辑移动到我的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函数，没有任何＆＃34;魔法＆＃34;背后。

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

如何在ng-click上堆叠多个动作/功能？

2 个答案: