1

我正在建立一个电子商务网站。我有一个名为“horizo​​ntalShoppingByCategoriesLayout”的指令，它监视当前的过滤条件（过滤返回的产品），当用户更改这些过滤条件时，指令设置搜索参数 $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();
        });
    }
});

过滤条件在名为“filterCriteriaVarietyCategoriesHorizo​​ntal”的指令中定义，该指令在“horizo​​ntalShoppingByCategoriesLayout”模板中定义。 

<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 下拉菜单下拉并显示该过滤条件类别的选项。然后，用户可以单击过滤条件选项，“horizo​​ntalShoppingByCategoriesLayout”检测到该选项，然后调用 $location 搜索参数的更改（更改 url 并启动产品的 web 服务调用）。

下拉列表中的过滤条件选项是一组复选框。我的问题是，当用户单击其中一个复选框时，它会导致下拉菜单关闭，这仅在用户将鼠标悬停在启动下拉菜单打开的按钮上时才会发生。我已经解决了单击复选框本身会导致下拉菜单通过在复选框上调用 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>

我确定它正在使用 $location.search(...) 将搜索参数添加到 url，这会导致下拉菜单关闭，因为如果我注释掉将（过滤条件到）搜索参数添加到url 在指令“horizo​​ntalShoppingByCategoriesLayout”中，则下拉菜单不会关闭。

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

使用下拉菜单中的复选框，我可以通过在 click 事件上调用 stopPropagation() 来阻止下拉菜单关闭，但是对于 $location 搜索参数的更改，我不知道如何为该更改 stopPropogation。

有没有人知道如何在更改 $location.search 参数时导致下拉菜单不关闭？

在此处输入图像描述 在此处输入图像描述

4

2 回答 2

2

我遇到了同样的问题，然后我查看了 angular boostrap ui 的源代码，发现：

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

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

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

在您的下拉控制器中

于 2015-04-16T06:57:08.710 回答
0

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

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

在这里发帖以防对其他人有帮助。

于 2018-04-24T12:10:18.590 回答