Programmatically triggering a 'click' events does not work inside ng-repeate, when using external jQuery library

[smlz]

When

• using the full jQuery library inside Angular.js (as opposed to the built-in jQLite lib)
• and triggering a 'click' event on a radio button inside a ng-repeate programmatically with jQuery

the model does not get updated, even though the effects of selecting the radio button are visible on the screen,.

However,

• manually clicking on the radio button
• or programmatically triggering the 'click'-event twice ($('input[name=test]').trigger('click').trigger('click'))

does give the expected results.

For full demo of the problem see the following jsfiddle: http://jsfiddle.net/MpyFW/8/

Being able to programmatically trigger events would be quite usefull for automated testing.

[smlz]

This issue might be related to #1574.

[Narretz]

While it's definitely weird, I don't think it's something that should necessarily be possible, as angular always drives the view from the model (or from real input). For testing, there's always browserTrigger

[alpha1125]

The smlz jsfiddle is using 1.1.1

Problem still exists with 1.2.19.

[caitp]

@kbdaitch I'm pretty sure this is your problem. (so basically, add an href)

[caitp]

the empty string is falsy --- you'd need something like # instead.

[charandas]

I tried with the # as the value, but no success with programmatically getting it.

Wonder if there are directive priorities at play? My ngClick is in a directive. Its basically a num keypad directive:

<div id="keypad" class="large-5 columns large-centered">
    <ul class="large-block-grid-3">
        <li><a ng-click="appendValue('1')" ng-disabled="disabled" class="button expand" href="#">1</a></li>
        <li><a ng-click="appendValue('2')" ng-disabled="disabled" class="button expand" href="#">2</a></li>
        <li><a ng-click="appendValue('3')" ng-disabled="disabled" class="button expand" href="#">3</a></li>
        ... omitted ...
        <li><a ng-click="backspace()" ng-disabled="disabled" class="button secondary expand" id="delete" href="#"><i class="fa fa-long-arrow-left"></i></a></li>
        <li><a ng-click="appendValue('0')" ng-disabled="disabled" class="button expand" href="#">0</a></li>
    </ul>
</div>

Also, I don't want the links to take the user to the application homepage: should I be using a preventDefault() somewhere?

[caitp]

maybe I'm not understanding what you're actually trying to do.

It sounded like you were saying you need to follow links, but your ng-clicks wouldn't work (this would happen if you were missing an href, because of the preventDefault() in the anchor directive).

What exactly do you mean by "programmatically getting it"

[gkalpak]

I believe @kbdaitch is using <a>s as action-buttons (so they shouldn't get the user on anywhere).
If I understand correctly the problem is that the ng-click action is not executed when programmatically triggering a click using jQuery.

It is not clear how that programmatic clicking is implemented, so a reproduction would be useful (e.g. in a plunkr or fiddle), or at least the "clicking" part of the code.

[gkalpak]

@kbdaitch: It basically seems to work for me (without adding any href), so we need more context.
Feel free to use this fiddle as base.

[charandas]

@gkalpak Thanks. Your fiddle helped me quickly test whether the click would work with a directive in the mix as well. It does work well. My problem was arising due to $(document.elementFromPoint(rect.left, rect.top)).click(); not using the correct rect. elementFromPoint won't return me the element consistently from a rect that was generated from element.getBoundingClientRect().

It return the <a> for key 8 but <li> for key 2. I will stop commenting on this thread for now since programmatic ngClick is working fine.

[gkalpak]

That's great ! BTW, it is usually preferable to place your click listeners on the <li>s (maybe that solves the elementFromPoint issue is your particular case as well).