3

JQuery と AngularJS の両方が使用されているページで作業しています。jQuery taggable-text.js プラグインを使用すると、マウス クリックとキーボードで「共有」アイテムを選択できます。

しかし、(AngularJS の範囲内で) テーブル内の要素を選択しようとすると、キーボード ボタンでしか選択できません。

'onclick' イベントが AngularJS の範囲内で発生しない理由を誰にも言えますが、他の人は .

次のイベントが添付されました (JSFiddle JS ブロックの 296 ～ 303 行目)。

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

完全なコードを表示できる JSFiddle のリンクを次に示します。

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

4

1 に答える 1

0

マウス クリックの問題を解決するための可能な回避策の 1 つを次に示します。OnMouseDown イベントを手動でバインドして処理できます。コードは JSFiddle で入手できます。

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

コードに isAngularJS 変数を追加しました。この変数が「true」に設定されている場合、onClickAngularJS 関数がアタッチされます。それ以外の場合 - ソースの onClick 関数 (行 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));
        }
    }
...

さらに、独自のクリック処理関数 (アンカー要素上) が必要になります (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();
}

...

最後に、config で「isAngularJS」パラメーターを指定する必要があります (766 ～ 770 行目)。

...
var isAngularJS = false;
if (config.isAngularJS && config.isAngularJS === true) {
    isAngularJS = true;
}
new Completer(this, config.strategies, fireChangeOn, isAngularJS);
...
于 2015-08-14T09:06:31.763 に答える