ng-單擊“無法正常工作”

Question

我正在添加一個下拉菜單，但是有一個錯誤正在嘗試修復。 目前，當我單擊圖標時，下拉列表將起作用。 但是，當單擊網站的其他按鈕或其他區域時，下拉列表保持打開狀態。 我希望它關閉...該項目中有很多代碼，所以我已經介紹了造成錯誤的部分。 有什么建議么？

HTML：

<div class="fa fa-ellipsis-v action-icon" ng-class="{'selected': menuActions}" ng-click="dropDownMenu()"></div>

JavaScript的：

// This function handles the ellipsis
            $scope.dropDownMenu = function () {
                  $scope.myShareFeature = false;
                  $scope.mySignatureFeature = false;
                  $scope.menuActions = !$scope.menuActions;

Answer 1

在這里看這個答案：

單擊各處，但這里有活動

他創建了自己的指令-然后在控制器上使用它：

app.directive('clickAnywhereButHere', function($document){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('click', function(e) {
        // this part keeps it from firing the click on the document.
        e.stopPropagation();
      });
      $document.bind('click', function() {
        // magic here.
        scope.$apply(attr.clickAnywhereButHere);
      })
    }
  }
})

HTML

<div class="fa fa-ellipsis-v action-icon" ng-class="{'selected': menuActions}" ng-click="dropDownMenu()" click-anywhere-but-here="dropDownMenu()"></div>

Answer 2

可能您必須使用頂級“單擊”事件偵聽器來關閉菜單。 同樣，您應該停止菜單內的“單擊”事件傳播。 但是，如果您將使用一些現有的庫或其他庫，那就更好了。