触发器使用angularJS单击最近的div

Question

您好我有以下代码：

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>

我的想法是，当我点击输入时，它会强制点击triggerHandler()到右侧的绿色div并打印他的号码。它应该只是强制点击绿色div，它位于点击输入的右侧，而不是全部。我今天写了一个关于JQuery的类似问题：Force click with trigger() on closest div

它有更多可能的解决方案。如何使用angularjs做同样的效果？

感谢。

Answer 1

将$event传递给主ng-click function，然后获取.parent()，然后获得第二个孩子。然后触发。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;