用angularjs 模拟的ul li下拉框怎么实现点击空白处消失？

Question

试过了好多办法都没有实现，求助

Answer 1

我使用的trick是，利用冒泡达到点击菜单外部关闭菜单的目的：

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

demo.directive('menu', function(){

    return {

        restrict: 'E',

        scope: {},

        link: function(scope, element, attrs) {

            scope.displayMenu = false;

            

            scope.showMenu = function(e) {

                scope.displayMenu = true;

                e.stopPropagation();

            };

            

            scope.clickInner = function(e) {

                e.stopPropagation();

            };

            

            document.addEventListener('click', function(){

                scope.displayMenu = false;

                scope.$apply();

            }, false);

            

        },

        template: '<button class="showBtn" ng-click="showMenu($event)">显示菜单</button>' +

                  '<div class="menu" ng-class="{show: displayMenu}" ng-click="clickInner($event)">' +

                       '<ul>' +

                            '<li>菜单一</li>' +

                            '<li>菜单二</li>' +

                            '<li>菜单三</li>' +

                      '</ul>' +

                  '</div>'

    };

});

在线例子: jsfiddle