одновременное срабатывание кнопки и тела

Question

angular.element('body').on('click', function () {
        //  $('.dropdown-menu').hide();
    console.log("clicked outside");
        });

$scope.showDropdown = function (e) {
      $scope.filterClick = !$scope.filterClick;
      e.stopPropagation();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<button id="btn-append-to-body" type="button" class="btn btn-primary" 
        ng-click="showDropdown()">
    <img src="assets/images/filterIcon.png">
    &nbsp&nbspFilter <span class="caret"></span>
</button>

  <li class="nav-item dropdown" ng-hide="filterClick">
      <div class="dropdown-menu">
        <div class="dropdown-item" ng-repeat="item in items">
          <div class="filter-class">
          </div>
        </div>
      </div>
  </li>

У меня есть функция нажатия кнопки и щелчка тела. Но если я напечатаю какое-либо значение в консоли во время щелчка тела, оно работает нормально. Но та же функциональность работает и для нажатия кнопки.

Моя потребность есть,

1) Если я нажму кнопку, нажатие тела не должно срабатывать. Должна работать только кнопка по нажатию кнопки.

2) при нажатии кнопки открывается раскрывающийся список фильтров. И когда я снова нажимаю ту же кнопку, она закрывается. (Переключение)

3) Но когда я щелкаю снаружи, я хочу скрыть этот выпадающий список. Но это не работает.

Как я могу сделать это с помощью angularjs?

Answer 1

Пропускание события $ при нажатии ng в дочернем элементе ie, а затем stopPropagation () для события в дочернем методе.StopPropagation останавливает всплывающее событие.

HTML

    <div ng-click='parentClick()'>
        <button ng-click="childClick($event)">Click Me</button>
    </div>

JS

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

    function MyCtrl($scope) {
        $scope.parentClick = function() {
            alert('Parent clicked');
        };
        $scope.childClick = function(event) {
            event.stopPropagation();
            alert('Child clicked');
        };
    }

Answer 2

Используйте event.stopPropagation () в функции обратного вызова дочернего элемента кнопки.

angular.element('#btn-append-to-body').on('click', function () {
    event.stopPropagation();
});