ECサイトを構築しています。現在のフィルター基準を監視する「horizontalShoppingByCategoriesLayout」というディレクティブがあり (返される製品をフィルター処理するため)、ユーザーがこれらのフィルター基準を変更すると、ディレクティブは検索パラメーター $location.search(..) を設定します。
...
filterParameters['searchtext'] = $scope.searchText;
filterParameters['order'] = searchorder;
filterParameters['page'] = page;
filterParameters['limit'] = limit;
$location.search(filterParameters);
その同じディレクティブで、私のコードは URL を監視するように設定されており、(フィルター基準の変更により) URL が変更された場合は検索を実行して製品を返すように設定されています。
$scope.$watch(function () { return $location.url(); }, function (url){
if (url){
$timeout(function() {
getProducts();
});
}
});
フィルター基準は、「horizontalShoppingByCategoriesLayout」のテンプレートで定義される「filterCriteriaVarietyCategoriesHorizontal」というディレクティブで定義されます。
<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 ドロップダウンがドロップダウンされ、そのフィルター基準カテゴリのオプションが表示されます。次に、ユーザーはフィルター基準オプションをクリックできます。これを "horizontalShoppingByCategoriesLayout" が検出し、$location 検索パラメーターの変更を呼び出します (これにより、URL が変更され、製品の Web サービス呼び出しが開始されます)。
ドロップダウンのフィルター基準オプションは、一連のチェックボックスです。私の問題は、ユーザーがこれらのチェックボックスのいずれかをクリックすると、ドロップダウンが閉じられることです。これは、ユーザーがドロップダウンの開始を開始したボタンから離れたときにのみ発生するはずです。チェックボックス自体をクリックすると、チェックボックスで ng-click="$event.stopPropagation()" を呼び出してドロップダウンが閉じるという問題を既に修正しました。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(...) を使用して検索パラメーターを URL に追加していると確信しています。これにより、ドロップダウンが閉じられます。これは、(フィルター基準への) 検索パラメーターを追加する行をコメントアウトすると、 url をディレクティブ「horizontalShoppingByCategoriesLayout」に追加すると、ドロップダウンが閉じません。
...
filterParameters['searchtext'] = $scope.searchText;
filterParameters['order'] = searchorder;
filterParameters['page'] = page;
filterParameters['limit'] = limit;
//$location.search(filterParameters);
ドロップダウンのチェックボックスを使用すると、クリックイベントで stopPropagation() を呼び出すことでドロップダウンが閉じないようにすることができましたが、 $location 検索パラメーターの変更については、その変更に対してプロポゲーションを停止する方法がわかりません。
$location.search パラメータが変更されたときにドロップダウンを閉じないようにする方法を知っている人はいますか?