Question

我基本上想要制作一个右键菜单，它会在点击的元素上记录评论。除了单击contextmenu元素之外，当我单击其他任何地方时，如何创建一个关闭的contextmenu。使用我的代码，即使单击上下文菜单中的元素，它也会关闭。

<div prevent-right-click visible="isVisible">
    asd
</div>


<div ng-if="isVisible">
    <div class="btn-group-vertical" 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 class="btn-group" role="group"> 
            <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> 
            <div class="dropdown-menu pull-left newdropdown" aria-labelledby="btnGroupVerticalDrop1"> 
                <form>
                    <input type="text" placeholder="Enter name"> <br>
                    <input type="text" placeholder="Enter comment">
                </form>
            </div> 
        </div> 
    </div>
</div>

这是我的AngularJs代码

    app.controller('mainCtrl', function($scope, $http, $timeout, $interval, $log){
    $scope.isVisible = false;
    $scope.$watch('isVisible', function(){
        $log.log($scope.isVisible)
    })
}); 

app.directive('preventRightClick', function() {
    return {
        restrict: 'A',
        scope: {
            visible: '='
        },
        link: function($scope, $ele) {
            $ele.bind("contextmenu", function(e) {
                e.preventDefault();
                $scope.$apply(function () {
                    $scope.visible = true;
                })
            });

            $(document).on('click', '*', function (event) {
                $scope.$apply(function () {
                    $scope.visible = false;
                })
            })
        }
    };
})

我的JsFidde链接：https://jsfiddle.net/ywf7kL5y/

Answer 1

你必须找出你点击的是什么，如果这是你的元素什么都不做。代码可能会有所帮助

var app = angular.module('myApp', []);

app.controller('mainCtrl', function($scope, $http, $timeout, $interval, $log) {
  $scope.isVisible = false;
  $scope.$watch('isVisible', function() {
    $log.log($scope.isVisible)
  })
});

app.directive('preventRightClick', function() {
  return {
    restrict: 'A',
    scope: {
      visible: '='
    },
    link: function($scope, $ele) {
      $ele.bind("contextmenu", function(e) {
        e.preventDefault();
        $scope.$apply(function() {
          $scope.visible = true;
        })
      });
      

      $(document).on('click', '*', function(event) {
      if(event.target.nodeName == 'HTML'){
        $scope.$apply(function() {
          $scope.visible = false;
        })
        }
      })
    }
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>

<body ng-app="myApp">
  <div ng-controller="mainCtrl">
    <div prevent-right-click visible="isVisible">
      asd
    </div>


    <div ng-if="isVisible">
      <div class="btn-group-vertical" 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 class="btn-group" role="group">
          <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
          <div class="dropdown-menu pull-left newdropdown" aria-labelledby="btnGroupVerticalDrop1">
            <form>
              <input type="text" placeholder="Enter name">
              <br>
              <input type="text" placeholder="Enter comment">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

在AngularJs中创建自定义上下文菜单

1 个答案: