Dropdown kann nicht in einem div geschlossen werden

Question

Dies ist meine Situation; Ich habe eine Eingabesuche. Wenn ich darauf klicke, erscheint ein neues Div unter dieser Eingabe. Innerhalb dieses Divs (das Div funktioniert es im Grunde wie ein Dropdown) gibt es einen Dropdown-Button (ich benutze uikit als css framework und Angularjs). Ich habe eine Direktive erstellt, dass, wenn ein Benutzer in dieses div klickt, das div offen bleibt, aber wenn ein Benutzer außerhalb dieses div klickt, wird es geschlossen. Es funktioniert, aber ich habe gerade ein Problem. Vorausgesetzt, ich klicke auf den Dropdown-Button, wird es geöffnet. Was ich würde ist, dass, wenn ich außerhalb dieser Schaltfläche klicke, selbst wenn ich in das div klicke, wird es das Dropdown schließen. Wirklich funktioniert nicht. Es schließt alles nur, wenn ich außerhalb des "großen" div klicke. Ich weiß, es ist schwer zu erklären, aber ich versuche mein Bestes zu geben. Durch die Art und Weise ist hier eine jsfiddle i mit der Situation erstellt haben: http://jsfiddle.net/8y48q/120/ ich einige Code schreiben:

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

hier ist der Controller in AngularJS mit der Richtlinie

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); 
      }) 
     } 
    } 
}); 

Dank. Ich bin verfügbar, um weitere Informationen zur Verfügung zu stellen

Answer 1

Das Problem war e.stopPropagation() in der Direktive. Das verhinderte alle Klickereignisse seines Kindes. also habe ich es entfernt und fügen Sie einige Bedingung auf document.bind und scheint zu arbeiten.

Hier Skript

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); 
      }); 

     } 
    } 
});