3

I am working with a page where both JQuery and AngularJS are used. Using jQuery taggable-text.js plugin I am able to select "Share-with" items by mouse click and keyboard.

But when I try to select elements inside table (in scope of AngularJS), I am able to do that only with keyboard buttons.

Can anyone say why the 'onclick' event does not fire in scope of AngularJS, but others are ?

The following events were attached (lines 296-303 in JSFiddle JS block):

this.listView = new ListView($list, this);
this.strategies = strategies;
this.$el.on('keyup', bind(this.onKeyup, this));
this.$el.on('keydown', bind(this.listView.onKeydown, this.listView));
this.$el.on('mousedown', bind(this.listView.onKeydown, this.listView));
this.$el.on('keydown', bind(this.onKeydown, this));
this.$el.on('keydown', 'button', bind(this.onButtonKeydown, this));
this.$el.on(fireChangeOn, bind(this.onChange, this));

Here is a link on JSFiddle where you can see the full code.

http://jsfiddle.net/sahak_k/k455Lx3f/5/

Sahak Kaghyan
  • 31
  • 2
  • Are you testing in chrome? And is it a select option. Then it wont work. – Alaksandar Jesus Gene Aug 07 '15 at 04:38
  • Yes, currently I am testing this on Chrome. But I also tested it on Mozilla Firefox (in Windows 8.1, 10 and Linux 14.04). And this option is mouse select option. I want to understand why it won't be working. Is there any documentation that can explain that ? – Sahak Kaghyan Aug 10 '15 at 05:57
  • as far as I know the best practice to use jQuery in angular is to create a new directive and include your jquery code there! – Francesco Aug 14 '15 at 09:08
  • Thank you for comment. I will try to implement that approach as well. – Sahak Kaghyan Aug 14 '15 at 09:45

1 Answers1

0

Here is one of possible workarounds to solve mouse click issue. You can manually bind and handle OnMouseDown event. The code is available in JSFiddle :

http://jsfiddle.net/k455Lx3f/7/

I have added isAngularJS variable in code. When this variable is set 'true' the onClickAngularJS function will be attached, otherwise - the source onClick function (lines 602-613) :

var ListView = (function() {
    function ListView($el, completer, isAngularJS) {
        this.$el = $el;
        this.index = 0;
        this.completer = completer;
        if (!isAngularJS) {
            this.$el.on('click', 'li.textcomplete-item', bind(this.onClick, this));
        } else {
            this.$el.on('mousedown', 'li.textcomplete-item > a', bind(this.onClickAngularJS, this));
        }
    }
...

plus you will need own click handling function (on anchor element) (lines 721-730):

onClickAngularJS : function(e) {
    var $e = $(e.target);
    e.originalEvent.keepTextCompleteDropdown = true;
    if(!$e.hasClass('textcomplete-item')) {
        $e = $e.parents('li.textcomplete-item');
    }
    var selectedIndex = parseInt($e.data('index'));
    this.completer.onSelect(this.data[selectedIndex]);
    e.preventDefault();
}

...

and, finally, you need to specify 'isAngularJS' parameter in config (lines 766-770):

...
var isAngularJS = false;
if (config.isAngularJS && config.isAngularJS === true) {
    isAngularJS = true;
}
new Completer(this, config.strategies, fireChangeOn, isAngularJS);
...
Sahak Kaghyan
  • 31
  • 2