Making a custom contextmenu in AngularJs

Question

I am basically wanting to make a right click menu which will record comments on the clicked element. How do I make a contextmenu which closes when I click anywhere else except when I click on the contextmenu elements. With the code I have, even on click the elements which are of the contextmenu, it closes.

<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>

Here is my AngularJs code

    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;
                })
            })
        }
    };
})

My JsFidde link: https://jsfiddle.net/ywf7kL5y/

mbeso · Accepted Answer · 2017-03-06 23:13:11Z

you have to find out what are you clicking, and if that is your element do nothing. Code bellow might help

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>

Collectives™ on Stack Overflow

Making a custom contextmenu in AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related