嗨，我有以下代码：
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 写了一个类似的问题：使用触发器（）在最近的 div 上强制单击 https://stackoverflow.com/questions/38302447/force-click-with-trigger-on-closest-div?noredirect=1#comment64022680_38302447
在那里它可以很好地解决更多可能的解决方案。我怎样才能用 AngularJS 达到同样的效果？
Thanks.
Pass $event到主要ng-click function然后得到.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;
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
