AngularJS

Question

我正在创建一个简单的下拉菜单，只要用户点击它，它就会带有动画人字形。我设法在点击时将旋转 class 附加到元素，但当用户点击其他地方时我无法将其删除。我想我需要检测 dom 上的点击并采取相应行动。我阅读了 this 博客，但在实现该代码时遇到了麻烦。有没有更简单的方法将人字形向后旋转？

Fiddle.

HTML:

<div ng-app="myApp" ng-controller="MainCtrl">
  <span class="dropdown dropDownSettings" ng-click="rotate = !rotate">
            <i class="fa fa-chevron-down draftDetails" id="editDropDown" data-toggle="dropdown" ng-class="{'rotate180' : rotate}"></i>
                <ul class="dropdown-menu" role="menu" aria-labelledby="editDropDown">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="">Edit</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="">Delete</a></li>
            </ul>
        </span>
</div>

JS:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.rotate = false;
});

CSS:

.dropDownSettings {
  margin-left: 100px;
  margin-top: 100px;
  cursor: pointer;
}


/*rotate 180*/

.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.draftDetails {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}

Answer 1

onblur 是元素失去焦点时触发的事件，因此您可以使用它来确定用户何时 'clicks elsewhere'.

您希望旋转 class 在单击元素时应用，并在单击其他地方时删除，这似乎很奇怪，它应该取决于下拉列表的展开/折叠状态吗？ angular 中有一个用于 bootstrap 插件的库：https://angular-ui.github.io/bootstrap/

Answer 2

您可以使用 CSS 更轻松地实现此目的。当下拉菜单有 open class.

时应用变换

.dropDownSettings.open .draftDetails  {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

http://jsfiddle.net/h9ga73fb/

AngularJS - 无法删除点击添加的 css class

AngularJS - Unable to remove added css class that was added on click

css

rotatetransform