如何關閉AngularJs中的自定義上下文菜單？

我在AngularJs中創建了一個自定義的contextmenu指令。現在，當我點擊自定義菜單以外的任何地方時它應該關閉。我在關閉菜單的文檔中綁定了一個點擊功能，但是對於頁面上有點擊事件的其他元素，它們已停止工作，只有文檔點擊功能正在工作。我該如何解決這個問題？我的角度代碼：如何關閉AngularJs中的自定義上下文菜單？

app.directive('preventRightClick', function() { 
return { 
    restrict: 'A', 
    scope: { 
     visible: '=' 
    }, 
    link: function($scope, $ele) { 
     $ele.on('contextmenu', '*', function(e) { 
      e.preventDefault(); 
      $scope.$apply(function() { 
       $scope.visible = true; 
       // console.log(e.pageX, e.pageY) 
       $('.parented').css({left:e.pageX, top:e.pageY}) 
      }) 
     }); 

     $(document).on('click', '*', function (e) { 
      if ($(e.target).parents('.parented').length > 0) { 
       // console.log('yes, its parent'); 
       // console.log($(e.target)) 
       console.log('Within parent clicked') 
      } 
      else{ 
       $scope.$apply(function() { 
        $scope.visible = false; 
       }) 
       console.log('Outside parent clicked') 
      } 
     })    
} 
}; 
})

我的HTML：

<div ng-if="isVisible" class="parented" style="display: inline-block;"> 
        <div class="btn-group-vertical notclick" role="group" aria-label="Vertical button group"> 
         <button type="button" class="btn btn-default">Button</button> 
         <button type="button" class="btn btn-default">Button</button> 
</div> 
</div>

來源

2017-03-07 Aijaz

嘗試角點擊外插件 https://github.com/IamAdamJowett/angular-click-outside 它易於使用，只需使用它像： <div class="menu" click-outside="closeThis()"></div>

來源

2017-03-07 23:25:34

我不能使用插件。我試圖在一個非常大的企業應用程序中使用它。我剛剛寫了簡單的代碼來獲取邏輯。 – Aijaz

如何關閉AngularJs中的自定義上下文菜單？

回答

相關問題