Erstellen eines benutzerdefinierten Kontextmenüs in AngularJs

Ich möchte grundsätzlich ein Rechtsklick-Menü erstellen, das Kommentare zu dem angeklickten Element aufzeichnet. Wie mache ich ein Kontextmenü, das sich schließt, wenn ich irgendwo anders klicke, als wenn ich auf die Kontextmenüelemente klicke. Mit dem Code, den ich habe, auch wenn Sie die Elemente anklicken, die zum Kontextmenu gehören, wird es geschlossen.Erstellen eines benutzerdefinierten Kontextmenüs in AngularJs

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

Hier ist mein 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; 
       }) 
      }) 
     } 
    }; 
})

Mein JsFidde Link: https://jsfiddle.net/ywf7kL5y/

Quelle

2017-03-06 Aijaz

Sie haben, um herauszufinden, was Sie klicken, und wenn das Ihr Element nichts zu tun. Code unten könnte helfen

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>

Quelle

2017-03-06 23:13:11 mbeso

Erstellen eines benutzerdefinierten Kontextmenüs in AngularJs

Antwort

Verwandte Themen