Element.bind每隔ng-click仅注册一次:::（AngularJS + Ionic）

Question

我正在尝试建立一个动画的汉堡菜单图标。 除了element.bind之外，其他所有步骤都可以正常工作，并且只能在每隔ng-click上应用活动类（这是动画的本质）。 当我将console.log放入$ scope.animateHamburger时，每次都会打印它。 请查看下面的代码，我还将列出控制台日志返回的内容。

controllers.js

$scope.animateHamburger = function() {
    $scope.button = angular.element(document.getElementsByClassName('c-hamburger')[0]);

    $scope.button.bind('click', function() {
        $scope.button.toggleClass('is-active');
    });
};

html

<button class="c-hamburger" ng-click="animateHamburger()" menu-toggle="left">
    <span>toggle menu</span>
</button>

CSS（如果需要）

/*** Hamburger button ***/
.c-hamburger {
  background: transparent;
  border: none;
  height: 44px;
  position: relative;
  top: -21px;
  text-indent: -9999px;
  width: 48px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  background: #fff;
  display: block;
  height: 2px;
  left: 9px;
  position: absolute;
  right: 4px;
  top: 21px;
}

.c-hamburger span::before,
.c-hamburger span::after {
  background-color: #fff;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;

  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger span::before {
  top: -8px;
  transition-property: top, transform;
}

.c-hamburger span::after {
  bottom: -8px;
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger.is-active span {
  background: none;
}

.c-hamburger.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.c-hamburger.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms=transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.c-hamburger.is-active span::before,
.c-hamburger.is-active span::after {
  transition-delay: 0s, 0.3s;
}
/* Hamburger button */

连续4次点击后，$ scope.animateHamburger中的console.log

Object { 0: <button.c-hamburger>, length: 1 } controllers.js
Object { 0: <button.c-hamburger>, length: 1 } controllers.js
Object { 0: <button.c-hamburger.is-active>, length: 1 } controllers.js
Object { 0: <button.c-hamburger.is-active>, length: 1 } controllers.js

Answer 1

这是应该解决您的问题的方法：

<button ng-class="{'is-active': isActive, 'c-hamburger c-hamburger--htx': !isActive}" ng-click="isActive = !isActive" menu-toggle="left">

控制器中不需要其他代码。