Question

这是我的情况; 我有输入搜索。当我单击它时，此输入下会出现一个新的div。在这个div内部（div基本上就像下拉菜单一样），有一个下拉按钮（我使用uikit作为css框架和Angularjs）。我创建了一个指令，当用户在此div中单击时，div保持打开状态，但当用户在其外部单击时，它会关闭。它正在工作，但我现在遇到了问题。假设我单击下拉按钮，它将打开它。如果我在这个按钮外面点击，即使我在div中单击，它将关闭下拉列表。实际上没有用。只有当我点击＆＃34;大＆＃34;它才会关闭所有内容。 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);
            });

        }
    }
});

无法关闭div

1 个答案: