[英]Element.bind registers only every other ng-click :: (AngularJS + Ionic)
I am trying to build an animated hamburger menu icon. 我正在尝试建立一个动画的汉堡菜单图标。 Everything is finished and works except the element.bind applies the active class only on every other ng-click (this is the essence of the animation). 除了element.bind之外,其他所有步骤都可以正常工作,并且只能在每隔ng-click上应用活动类(这是动画的本质)。 When I put console.log into the $scope.animateHamburger, it gets printed every time. 当我将console.log放入$ scope.animateHamburger时,每次都会打印它。 Please see the code below where I also list what the console log returns. 请查看下面的代码,我还将列出控制台日志返回的内容。
controllers.js 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 html
<button class="c-hamburger" ng-click="animateHamburger()" menu-toggle="left">
<span>toggle menu</span>
</button>
css (if needed) 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 */
console.log inside of $scope.animateHamburger after 4 successive clicks 连续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
Here is what should solve your issue: 这是应该解决您的问题的方法:
<button ng-class="{'is-active': isActive, 'c-hamburger c-hamburger--htx': !isActive}" ng-click="isActive = !isActive" menu-toggle="left">
And no additional code is needed in controller. 控制器中不需要其他代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.