jQuery click() method translated to Angular

Question

I have a jQuery code:

$('.class i').click(function() {
    $(this).parent().find('input').click();
});

Which adds click method to the sibling element when <i> element is clicked.

<div class="class">
    <input>
    <i>
</div>

What would be the same syntax using Angular?

What I have now is:

<div class="class">
    <input>
    <i ng-click="onMyClickFunction($event)">
</div>

onMyClickFunction = function(event){
    angular.element(event.target).parent().find('input').click();
}

I am using Angular's jqLite. But Angular's jqLite has no click() method. This click() method is a native javascript which is not cross-browser supported plus is not supported on mobile devices.

Maybe you want to use | angular.element('#myselector').trigger('click'); — Enrique Quero
– Enrique Quero, Commented Dec 15, 2015 at 10:36

Pjetr · Accepted Answer · 2015-12-15 11:07:19Z

1

Another option would be to not do this using javascript. Just use the default browser behavior, when you click on a label for an input, the input is selected. You could do this with 2 different approaches:

Simply wrap the input and the icon in a label

<label class="class">
    <input>
    <i>
</label>

Or you could use the for attribute

<div class="class">
    <input id="{{ $id }}">
    <label for="{{ $id }}"><i></label>
</div>

answered Dec 15, 2015 at 11:07

Pjetr

1,39210 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blix Over a year ago

I guess this is the best solution to the problem. Thank you for thinking this through.

Sudhansu Choudhary · Accepted Answer · 2015-12-15 11:25:41Z

0

Write a directive,

app.directive('clickThis', function () {
    return {
      restrict: 'A',
      link: function(scope, element) {

        element.bind('click', function(e) {
            angular.element(e.target).clickThis('.class').find('input').trigger('click');
        });
      }
    };
});

And your html would be,

<div class="class">
    <input>
    <i clickThis>
</div>

Where clickThis is the Directive.

If you could provide an ID to that input the selection would get simpler. If it is feasible, that is!!

answered Dec 15, 2015 at 11:25

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Comments

trincot · Accepted Answer · 2015-12-15 11:51:23Z

0

Use trigger('click') instead:

onMyClickFunction = function(event){
    angular.element(event.target).parent().find('input').trigger('click');
}

edited Dec 15, 2015 at 11:51

trincot

357k38 gold badges282 silver badges339 bronze badges

answered Dec 15, 2015 at 10:37

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

1 Comment

Blix Over a year ago

downvoters never do. Coward. Anyway thanks for your effort. I up-voted you for the change.

Collectives™ on Stack Overflow

jQuery click() method translated to Angular

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related