使用angularjs关闭div中的下拉列表

Question

我有一个简单的div自定义下拉列表，当您专注于输入时会出现。此下拉列表包含另一个下拉列表。这个是真实的＆＃34;来自 uikit 的下拉类。如果我在外面点击，我就无法解除 uikit 下拉列表。用户有义务关闭所有下拉菜单以关闭该下拉菜单。无论如何，这里是 jsfiddle ：http://jsfiddle.net/8y48q/59/

以下是 HTML 部分：

<div ng-app="myApp">
    <div class="uk-width-1-1" ng-controller="TestCtrl">        
      <form id="form" class="uk-form uk-width-1-1 center-form">

              <!-- This is a button -->
              <input id="input" data-ng-click="openSearch()" hide-search="hideSearchContainer()" type="text" placeholder="text" class="uk-width-1-1 uk-vertical-align-middle">

                  <div hide-search="hideSearchContainer()" data-ng-class="{'search-results':userSearch, 'search-results-closed':!userSearch}" class="search-results-closed scrollable-vertical">
                    <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click'}">

                    <!-- This is the button toggling the dropdown -->
                    <button class="uk-button">...</button>

                   <!-- This is the dropdown -->
                   <div class="uk-dropdown uk-dropdown-small">
                      <ul class="uk-nav uk-nav-dropdown">
                         <li><a ng-click="test()" href="">First1</a></li>
                         <li><a ng-click="test()" href="">Second2</a></li>
                      </ul>
                   </div>

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

以下是 Angularjs 部分：

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

myApp.controller('TestCtrl', function ($scope) {

    $scope.openSearch = function(){
            $scope.userSearch = true;
        };
        $scope.hideSearchContainer = function(){
            $scope.userSearch = false;
        };
    $scope.test = function(text) {
        alert("Hi");
    }
});

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