无法关闭 div 内的下拉菜单

Question

这是我的情况； 我有一个输入搜索。当我点击它时，这个输入下会出现一个新的 div。在这个 div 里面（这个 div 基本上就像一个下拉菜单），有一个下拉按钮（我使用 uikit 作为 css 框架和 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);
            });

        }
    }
});