Angularjs Dropdown закрывается при изменении параметров $location.search

Question

Я создаю сайт электронной коммерции. У меня есть директива под названием "horizontalShoppingByCategoriesLayout", которая следит за текущими критериями фильтрации (чтобы отфильтровать возвращаемые продукты), и, когда пользователь изменяет эти критерии фильтрации, директива устанавливает параметры поиска $location.search (..).

 ...
filterParameters['searchtext'] = $scope.searchText;
filterParameters['order'] = searchorder;
filterParameters['page'] = page;
filterParameters['limit'] = limit;
$location.search(filterParameters);

По той же директиве мой код настроен на просмотр URL, а если он меняется (из-за изменений в критериях фильтра), то для поиска товаров.

$scope.$watch(function () { return $location.url(); }, function (url){
    if (url){
        $timeout(function() {
            getProducts();
        });
    }
});

Критерии фильтра определены в директиве "filterCriteriaVarietyCategoriesHor Horizontal", которая определена в шаблоне "horizontalShoppingByCategoriesLayout".

<div class="pull-leftt" ng-if='numberProducts != undefined && numberProducts > 0'>
    <filter-criteria-horizontal execute-criteria-search=$parent.executeCriteriaSearch category-id=$parent.categoryId search-criteria-list=$parent.searchCriteriaList></filter-criteria-horizontal>
</div>

Когда пользователь наводит указатель мыши на кнопку категории критериев фильтра, это вызывает угловое событие, которое вызывает раскрывающийся список начальной загрузки Angular-UI и отображает параметры для этой категории критериев фильтра. Затем пользователь может щелкнуть параметр критерия фильтрации, который "horizontalShoppingByCategoriesLayout" обнаруживает, а затем вызывает изменение параметров поиска $location (которое изменяет URL-адрес и инициируется вызов веб-службы для продуктов).

Параметры критерия фильтра в раскрывающемся списке представляют собой набор флажков. Моя проблема заключается в том, что когда пользователь нажимает на один из этих флажков, это вызывает закрытие раскрывающегося списка, что должно происходить только тогда, когда пользователь нажимает кнопку, которая инициировала открытие раскрывающегося списка. Я уже исправил проблему, когда нажатие на флажок само по себе вызывает закрытие раскрывающегося списка, вызывая ng-click="$event.stopPropagation()" в флажке. Вот мой код для категории критериев фильтра, раскрывающихся списков и флажков.

<div class="coll-md-12" ng-mouseleave="closeAll()">
<div class="btn-group" dropdown is-open="status.isopen">
    <button  ng-mouseleave="close()" ng-mouseenter="open()" type="button" ng-class="{'filter-criteria-variety-category-name-hover': filterCriteriaCategoryActive}" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" dropdown-toggle ng-disabled="disabled">
        {{searchCriteria.criteriaName}}<span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <div class="search-criteria-values" ng-mouseleave="close()" ng-mouseenter="keepOpen()">

            <div ng-if="searchCriteria.imageBasedFilter == true">
                <filter-criteria-options-visual filter-criteria-options=$parent.searchCriteria.criteriaOptionValues></filter-criteria-options-visual>
            </div>
            <div ng-if="searchCriteria.imageBasedFilter == false">
                <div class="col-md-12 no-padding" ng-repeat="searchCriteriaOption in searchCriteria.criteriaOptionValues">
                    <div class="pull-left filter-criteria-checkbox-item">{{searchCriteriaOption.criteriaOption}} <input ng-click="$event.stopPropagation()" id="{{searchCriteriaOption.criteriaOption}}" type="checkbox"  ng-model="searchCriteriaOption.checked"/></div>
                </div>
            </div>
        </div>
    </div>
</div>

Я уверен, что добавление параметров поиска к URL с помощью $location.search (...) вызывает закрытие раскрывающегося списка, потому что, если я закомментирую строку, которая добавляет (критерии фильтра к) параметры поиска к URL в директиве HorizontalShoppingByCategoriesLayout, то раскрывающийся список не закрывается.

     ...
filterParameters['searchtext'] = $scope.searchText;
filterParameters['order'] = searchorder;
filterParameters['page'] = page;
filterParameters['limit'] = limit;
//$location.search(filterParameters);

С помощью флажков в раскрывающемся меню я смог остановить закрытие раскрывающегося списка, вызвав stopPropagation () для события click, но для изменения параметров поиска $location я не знаю, как остановить Propogation для этого изменения.

У кого-нибудь есть идеи, как заставить раскрывающийся список не закрываться при внесении изменений в параметры $location.search?

Answer 1

У меня возникла та же проблема, после чего я заглянул в исходный код angular boostrap ui и обнаружил:

    $scope.$on('$locationChangeSuccess', function() {
      scope.isOpen = false;
    });

И хакерское решение было бы удалить слушателя

    $scope.$$listeners.$locationChangeSuccess = [];

в вашем выпадающем контроллере

Answer 2

Решение от user3217868 работало хорошо для меня, но я должен был выполнить код, как только документ был полностью загружен, как в моем коде ниже.

angular.element(document).ready(function () {
    $scope.$$listeners.$locationChangeSuccess = [];
});

Размещение здесь на случай, если это может быть полезно для кого-то еще.