DropDown 不会在点击时关闭

Question

我有一个问题，如果你看到 Plunker link，我不知道如何让我的下拉菜单在我点击指令时自动关闭。

任何人都可以提出解决这个问题的建议吗？

谢谢

Answer 1

这里是根据我的评论的解决方案：

http://plnkr.co/edit/2UG1Kj2l3fuVgYXaOB6d?p=preview

我在 body 上有一个自定义指令

<body class="container" ng-controller="mainCtrl" dropdown-listener>

它在 window 上侦听点击事件。

它会触发您的 dropdownDirective 正在侦听的事件：

myApp.directive('dropdownListener', function ($window, $rootScope) {
            return {
                restrict: 'A',

        link: function(scope, element, attr) {
          var w = angular.element($window);

          w.bind('click', function(){
            $rootScope.$broadcast('dropdown:close');
          });
                }
            }
        });

在你的dropdownDirective

$scope.$on('dropdown:close', function (event, data) {
    $scope.$apply(function() {
      if($scope.open) { //only close when it is open
        $scope.open = !$scope.open; //quick and dirty solution - withouth apply it didn't work. Maybe you could investigate further
      }
      });
  })

DropDown 不会在点击时关闭

DropDown doesn't close on click out

javascript

angularjs

drop-down-menu