AngularJS - Невозможно удалить добавленный класс CSS, который был добавлен при клике

Question

Я создаю простое выпадающее меню с анимированным шевроном, когда пользователь нажимает на него. Мне удалось прикрепить класс поворота к элементу при нажатии, но я не могу удалить его, когда пользователь щелкает в другом месте. Я думаю, мне нужно обнаружить клики на дом и действовать соответственно. Я читал этот блог, но у меня возникли проблемы с реализацией этого кода. Есть ли более простой способ поворота шеврона назад?

Скрипка

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

Вы можете достичь этого гораздо проще, используя CSS. Просто примените преобразование, когда выпадающий список open учебный класс.

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

http://jsfiddle.net/h9ga73fb/

Answer 2

onblur это событие, которое срабатывает, когда элемент теряет фокус, поэтому вы можете использовать это, чтобы определить, когда пользователь "щелкает в другом месте".

Кажется странным, что вы хотите, чтобы класс rotate применялся при щелчке элемента и удалялся при щелчке в другом месте. Разумеется, это должно зависеть от развернутого / свернутого состояния раскрывающегося списка? Есть библиотека для плагинов начальной загрузки в angular: https://angular-ui.github.io/bootstrap/