用angularJS触发点击最接近的div [英] Trigger click on closest div with angularJS

问题描述

您好，我有以下代码：

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;身高：26px; < script src =>     

我的想法是，当我点击一个输入时，它强制点击 triggerHandler（）到右侧的绿色div并打印出他的号码。它应该强制单击点击输入右侧的绿色div，而不是全部。我今天为JQuery写了一个类似的问题：强制点击触发器（）在最接近的div

它可以很好地处理更多可能的解决方案。我怎样才能做到与angularjs相同的效果？

谢谢。

解决方案

<将 $ event 传递给主 ng-click函数，然后获取 .parent（ ）然后是第二个孩子。然后触发。

  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;身高：26px; < script src =>

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.

解决方案

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>

这篇关于用angularJS触发点击最接近的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！