$ location.search参数更改后，Angularjs Dropdown关闭

Question

我正在建立一个电子商务网站。我有一个名为＆＃34; horizo​​ntalShoppingByCategoriesLayout＆＃34;监视当前过滤条件（过滤正在返回的产品），当用户更改这些过滤条件时，该指令设置搜索参数$ location.search（..）。

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

在同一指令上，我的代码设置为观察网址，如果网站发生变化（由于过滤条件的变化），则执行搜索以返回产品。

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

筛选条件在名为＆＃34; filterCriteriaVarietyCategoriesHorizo​​ntal＆＃34;的指令中定义。这是在＆＃34; horizo​​ntalShoppingByCategoriesLayout＆＃34;的模板中定义的。

<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 Bootstrap下拉列表下拉并显示该过滤条件类别的选项。然后，用户可以单击过滤条件选项，其中＆＃34; horizo​​ntalShoppingByCategoriesLayout＆＃34;检测并调用$ location搜索参数的更改（更改网址并启动产品的Web服务调用）。

下拉列表中的过滤条件选项是一组复选框。我的问题是，当用户点击其中一个复选框时，它会导致下拉菜单关闭，这应该仅在用户将鼠标悬停在启动下拉列表开头的按钮上时才会发生。我已经解决了这个问题，点击复选框，它会导致下拉菜单关闭，方法是调用ng-click =＆＃34; $ event.stopPropagation（）＆＃34;在复选框上。这是我的filtercriteria类别，下拉列表和复选框的代码。

<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>

我确定它正在使用$ location.search（...）将搜索参数添加到网址，这会导致下拉列表关闭，因为如果我注释掉添加了（过滤条件到）在指令＆＃34; horizo​​ntalShoppingByCategoriesLayout＆＃34;中搜索参数到url，然后下拉列表不会关闭。

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

通过下拉列表中的复选框，我可以通过在click事件上调用stopPropagation（）来停止关闭下拉菜单，但是对于$ location搜索参数的更改，我不知道如何为此停止播放变化

有没有人知道在对$ location.search参数进行更改时如何使下拉列表不关闭？

Answer 1

我有同样的问题，然后我查看了角度boostrap ui的源代码并找到了：

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

一个hacky解决方案将删除监听器

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

您的下拉控制器中的

Answer 2

来自user3217868的解决方案对我来说效果很好但是我必须在文档完全加载后执行代码，就像我下面的代码一样。

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

在此发布以防其他人可能会有所帮助。