2017-03-07 10 views
0

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

答えて

1

クリック-外の角度使いやすいです https://github.com/IamAdamJowett/angular-click-outside プラグイン、ちょうどそのようにそれを使用してみてください。 <div class="menu" click-outside="closeThis()"></div>

+0

Iプラグインを使用することはできません。私はかなり大きなエンタープライズアプリでこれを使用しようとしています。私はロジックを得るために単純なコードを書いただけです。 – Aijaz

関連する問題