Не удается закрыть выпадающее меню внутри 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); 
      }); 

     } 
    } 
});