Trigger click on closest div with angularJS

Question

Hi I've got follow code:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.clickedInput = function() {
    setTimeout(function() {
      angular.element('.addon').triggerHandler('click');
    }, 100);
  }

  $scope.clickedAddon = function(number) {
    console.log(number);
  }
});

.wrapper {
  display: flex;
  flex-direction: column;
}
.inputWithAddon {
  display: flex;
  margin-bottom: 10px;
}
input {
  height: 20px;
}
.addon {
  width: 26px;
  height: 26px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="myApp" ng-controller="myController">
  <div class="inputWithAddon">
    <input placeholder="1" class="myInput" ng-click="clickedInput()">
    <div class="addon" ng-click="clickedAddon(1)">1</div>
  </div>
  <div class="inputWithAddon">
    <input placeholder="2" class="myInput" ng-click="clickedInput()">
    <div class="addon" ng-click="clickedAddon(2)">2</div>
  </div>
  <div class="inputWithAddon">
    <input placeholder="3" class="myInput" ng-click="clickedInput()">
    <div class="addon" ng-click="clickedAddon(3)">3</div>
  </div>
</div>

My idea is, when I click in an input, it forces a click with triggerHandler() to the green div on the right side and prints his number. It should just force the click of the green div, which is on the right side of the clicked input, not all of them. I wrote today a similar question for JQuery: Force click with trigger() on closest div

There it works fine with more possible solutions. How can I do the same effect with angularjs?

Thanks.

in angular you should just directly change the function in the ng-click, much cleaner. "think-angular" "not-think-jquery" — Iceman
– Iceman, Commented Jul 11, 2016 at 9:38
The problem is, that my addon button calls a tooltip with a costum attribut and some json data within... It's a plugin and handles the tooltip in the background. So I have to force a click on it. This is just a example to show the effect.. I can't just call a function in my real code for the addon... — webta.st.ic
– webta.st.ic, Commented Jul 11, 2016 at 9:39
Done!!! chk my answer. 1/2 an hour of painstacking puzzle work clearly shows why we all need jquery. :D — Iceman
– Iceman, Commented Jul 11, 2016 at 9:59

Iceman · Accepted Answer · 2016-07-11 09:59:00Z

Pass $event to the main ng-click function and then get .parent() and then the 2nd child. Then trigger.

var a = angular
             .element($event.target)
             .parent().children()
        angular
             .element(a[1]).triggerHandler('click');

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.clickedInput = function($event) {
    setTimeout(function() {
        var a = angular
             .element($event.target)
             .parent().children()
        angular
             .element(a[1]).triggerHandler('click');
        
    }, 100);
  }

  $scope.clickedAddon = function(number) {
    console.log(number);
  }
});

.wrapper {
  display: flex;
  flex-direction: column;
}
.inputWithAddon {
  display: flex;
  margin-bottom: 10px;
}
input {
  height: 20px;
}
.addon {
  width: 26px;
  height: 26px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="myApp" ng-controller="myController">
  <div class="inputWithAddon">
    <input placeholder="1" class="myInput" ng-click="clickedInput($event)">
    <div class="addon" ng-click="clickedAddon(1)">1</div>
  </div>
  <div class="inputWithAddon">
    <input placeholder="2" class="myInput" ng-click="clickedInput($event)">
    <div class="addon" ng-click="clickedAddon(2)">2</div>
  </div>
  <div class="inputWithAddon">
    <input placeholder="3" class="myInput" ng-click="clickedInput($event)">
    <div class="addon" ng-click="clickedAddon(3)">3</div>
  </div>
</div>

Collectives™ on Stack Overflow

Trigger click on closest div with angularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related