仅在AngularJS中左键单击禁用焦点事件

Question

I have an angular-strap datepicker that I only want to show on right click.

This I want to do over the default focus() method, as this is convenient for closing the thing once it blurs. To use the focus method on any element like a DIV, I added a tabindex.

The problem is, I can't seem to be able to disable the focus on the left click only. It's either disabled completely, or working for both.

I've already prevented the context menu to show on right click.

directives.directive('ngRightClick', ["$parse", function($parse) {
  return function(scope, element, attrs) {
    var fn = $parse(attrs.ngRightClick);
    element.bind('contextmenu', function(event) {
        scope.$apply(function() {
            event.preventDefault();
            fn(scope, {$event:event});
        });
    });
  };
}])

For the left click, I've tried preventDefault(), but that doesn't really work. Then I've tried to blur it on click, which works, but the focus event is still called beforehand, for a fraction of a second.

directives.directive('ngLeftNofocus', ["$parse", function($parse) {
  return function(scope, element, attrs) {
    var fn = $parse(attrs.ngLeftNofocus);
    element.bind('click', function(event) {
        scope.$apply(function() {
            event.preventDefault();
            element[0].blur();
        });
    });
  };
}])

This can all be found in a Plnkr: http://plnkr.co/edit/T2YBYwfqSLKxCUL0ITgk?p=preview

I know there are some solutions to prevent the focus using jQuery on this site, but I need it to stay active for the right click somehow.

Alternatively, if someone has a better way to trigger the datepicker on right click only (that it also closes once the user clicks anywhere else), I'd love to look at that too.

Answer 1

You could use bs-show attribute to toggle the datepicker manually.

Combined with the ng-right-click and ng-blur , it will give what you want.

<div bs-datepicker ng-model="test" tabindex="1"
    data-trigger="manual"
    bs-show="showDatePicker"
    ng-blur="showDatePicker = false"
    ng-right-click="showDatePicker = true">CLICK HERE</div>

Example Plunker: http://plnkr.co/edit/zJXdZOIZ9XQey3BkQ3I2?p=preview