Question

任何人都可以帮助我吗？我的应用程序有各种下拉菜单，我试图关闭它们点击其他菜单项和点击正文。我在没有jQuery的情况下使用angular.js。

HTML

<div ng-controller="SomeController as controller">
<div class="select-box">
    <div class="select-box-field" ng-click="dropdown = !dropdown;">
        <span>Menu Name</span>
    </div>
    <div class="select-box-field-dropdown" ng-class="{ 'is-active':dropdown }">
        <span>Dropdown menu Item 1</span>
        <span>Dropdown menu Item 2</span>
    </div>
</div>

控制器

(function() {

  var app = angular.module('application');

  app.controller('SomeController', someCtrl);

  function someCtrl () { 

    var vm = this;
    vm.dropdown = false;

  };
})();

这是小提琴http://jsfiddle.net/aafvxmbn/2/

Answer 1

<强>更新

您可以从容器中调用相同的注释并调用$event.stopPropagation()

查看此更新fiiddle 您可以在ng-click

中设置下拉值

<div class="select-box-field" ng-click="change(1)">

或

<div class="select-box-field" ng-click="change(1)">

并在控制器中函数change（）

.controller("Ctrl1", function($scope, $element)
  {
      $scope.dropdown=0;
      $scope.change = function(a) {

            $scope.dropdown=a;
      }

  })

请参阅此fiddle了解完整的工作演示

Answer 2

为您的下拉列表创建一个指令，它还处理click事件。在您的情况下，它只会设置dropdown = false;。为此，它将绑定两个事件处理程序：一个在 html 上，另一个在elem本身上。像这样：

myApp.directive('clickOutside', function() {
    return function(scope, elem) {
        var x = document.getElementsByTagName("BODY")[0];
        x.addEventListener('click', function() {
            dropdown = false;
            scope.$apply();            
        });
        elem.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }
});

它可能无法正常工作，您需要将指令添加到标记中并将dropdown传递给指令。做一个小提琴，让你更容易帮助你。

有关检测外部点击的详细信息，请参阅How do I detect a click outside an element?

请参阅以下fiddle：

单击其他菜单项或正文（Angularjs）时关闭下拉菜单

2 个答案: