Не удается закрыть выпадающий список внутри div

Question

Это моя ситуация; У меня есть входной поиск. Когда я нажимаю на него, под этим вводом появляется новый div. Внутри этого div (div в основном работает как выпадающий список) есть кнопка выпадающего меню (я использую uikit в качестве css framework и Angularjs). Я создал директиву, что, когда пользователь щелкает внутри этого div, div остается открытым, но когда пользователь щелкает снаружи, он закрывается. Это работает, но у меня сейчас проблема. Если я нажму на кнопку выпадающего меню, она откроется. Что я хотел бы, так это то, что если я нажму за пределами этой кнопки, даже если я нажму внутри div, он закроет раскрывающийся список. На самом деле не работает. Он закроет все, только если я нажму "большой" div. Я знаю, это трудно объяснить, но я стараюсь изо всех сил. Кстати, вот jsfiddle, который я создал с ситуацией: http://jsfiddle.net/8y48q/120/ Я публикую некоторый код:

<div ng-app="myApp">
    <div ng-controller="TestCtrl">      
   <form class="uk-form uk-margin-large">
       <input autocomplete="off"
               data-ng-click="openSearch();"
               style="padding-left: 35px!important;"
               hide-search="hideSearchContainer()"
               data-ng-model="searchText" class="uk-width-1-1" type="search"
               placeholder="Hello">
        <div hide-search="hideSearchContainer()" data-ng-class="{'search-input':userSearch,
                     'search-input-closed':!userSearch}"
                     class="search-input-closed">
          <div class="uk-width-1-3 center-pane">

                            <div class="uk-button-dropdown" title="Click here" data-uk-dropdown="{mode:'click'}">
                                <button type="button" class="uk-button uk-button-primary qt-button-dropdown-material">
                                    <span class="qt-dropdown-text-material">Types</span>
                                </button>

                                <div class="uk-dropdown qt-dropdown uk-dropdown-scrollable" style="">
                                    <ul class="uk-nav uk-nav-dropdown" id="kb_menu">
                                         <li key-navigation ng-repeat="item in items">
                            <a href="">{{item}}</a>
                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
        </div>               

    </form>
    </div>
</div>

вот контроллер в Angularjs с директивой

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl',function($scope){
    $scope.items=['menu item 1','menu item 2'];
    $scope.openSearch = function(){
            $scope.userSearch = true;
        };

  $scope.hideSearchContainer = function(){
    $scope.userSearch = false;
  };
    $scope.itemClicked = function(item, event, index){

    }

    $(document).on('click', '.uk-dropdown', function() {
        $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open');
    });
});

myApp.directive('hideSearch', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(attr.hideSearch);
            })
        }
    }
});

Благодарю. Я могу предоставить любую другую информацию

Answer 1

Проблема была в e.stopPropagation() в директиве. Это предотвращало все события кликов его дочернего элемента. поэтому я удалил его и добавил некоторые условия в document.bind и, кажется, работает.

Вот сценарий

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl',function($scope){
    $scope.items=['menu item 1','menu item 2'];
    $scope.openSearch = function(){
            $scope.userSearch = true;
        };

  $scope.hideSearchContainer = function(){
    $scope.userSearch = false;
  };
    $scope.itemClicked = function(item, event, index){

    }
    $(document).on('click', '.uk-dropdown', function() {
        $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open');
    });

});

myApp.directive('hideSearch', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {
                //e.stopPropagation();
            });
            $document.bind('click', function(e) {
                if(e.target.className == "uk-notouch")
                   scope.$apply(attr.hideSearch);
            });

        }
    }
});