javascript - 点击退出后下拉菜单不会关闭

标签 javascript angularjs drop-down-menu

如果您看到Plunker link,我就有问题了,我不知道如何在单击指令时使下拉列表自动关闭。

有人可以提出解决这个问题的建议吗?

谢谢

最佳答案

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

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

我有一个自定义指令位于主体

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

它监听窗口的点击事件。

它会触发您的 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
      }
      });
  })

关于javascript - 点击退出后下拉菜单不会关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31721900/

相关文章:

javascript - 向 Angular 对象添加属性

c# - `Angularjs` 使用 `WebMethod` 调用 `PARAMETERS`

javascript - 如何使用 jquery 中的其他下拉菜单设置下拉文本和值

javascript - 如何使用 url 参数过滤图库

javascript - 将用户对象传递给组件模式

javascript - 页面打开时菜单打开(下拉)

HTML 选择下拉自定义箭头 css

javascript - 生成 RSA key 对客户端(在浏览器上)

javascript - 使用 json 和 Ajax 将对象传递给 MVC View

php - 当我包含特殊字符串时,Wordpress 不会解析 JSON