Angularjs Dropdown closes when $location.search parameters are changed

Question

I'm building an ecommerce site. I have a directive called "horizontalShoppingByCategoriesLayout" that watches the current filter criteria (to filter products being returned) and as the user changes those filter criteria the directive sets the search parameters $location.search(..).

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

On that same directive my code is set up to watch the url, and if it changes (due to changes in filter criteria) then to do a search to return products.

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

The filter criteria are defined in a directive called "filterCriteriaVarietyCategoriesHorizontal" that is defined in the template of "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>

When a user hovers over the filter criteria category button, this triggers an angular event that causes an Angular-UI Bootstrap dropdown to drop down and show the options for that filter criteria category. The user can then click on the filter criteria option, which "horizontalShoppingByCategoriesLayout" detects and then calls a change on the $location search parameters (which changes the url and a webservice call for products is initiated).

The filter criteria options in the dropdown are a set of checkboxes. My problem is when the user clicks on one of these checkboxes, it causes the dropdown to close, which should only happen when the user hovers off of the button that initiated the dropdown opening. I already fixed the problem where the clicking on the checkbox it's self causes the dropdown to close by calling ng-click="$event.stopPropagation()" on the checkbox. Here is my code for the filtercriteria category, dropdown, and checkboxes.

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

I'm sure that it is adding search parameters to the url with $location.search(...) that is causing the dropdown to close because if I comment out the line that adds the (filter criteria to the) search parameters to the url in the directive "horizontalShoppingByCategoriesLayout", then the dropdown does not close.

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

With the checkboxes in the dropdown I was able to stop the dropdown from closing by calling stopPropagation() on the click event, but for a change in the $location search parameters I don't know how to stopPropogation for that change.

Does anyone have an idea how to cause the dropdown to not close when changes are made to the $location.search parameters?

enter image description here

Best suggestion is to create a scaled down demo on a public code sharing site (jsfiddle.net, plnkr.co etc) that replicates the issue — charlietfl, Jan 23 '15 at 22:09

user3217868 · Answer 1 · 2015-04-16T07:17:25.233

2

I had the same issue then I looked into the source code of angular boostrap ui and found:

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

And a hacky solution would be remove the listener

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

in your dropdown controller

edited Apr 16 '15 at 07:17

answered Apr 16 '15 at 06:57

user3217868

21
4

score 0 · Answer 2 · answered Apr 24 '18 at 12:10

The solution from user3217868 worked well for me but I had to execute the code once the document was fully loaded like on my code below.

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

Posting here in case it may be helpful to someone else.

Angularjs Dropdown closes when $location.search parameters are changed

2 Answers2