如何以编程方式触发 ngClick

IT技术 javascript jquery angularjs angularjs-ng-click
2021-01-28 13:18:05

我想ng-click在运行时触发一个元素,如:

_ele.click();

或者

_ele.trigger('click', function());

如何才能做到这一点?

6个回答

语法如下:

function clickOnUpload() {
  $timeout(function() {
    angular.element('#myselector').triggerHandler('click');
  });
};

// Using Angular Extend
angular.extend($scope, {
  clickOnUpload: clickOnUpload
});

// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;

有关 Angular Extend 方式的更多信息,请参阅此处

如果您使用的是旧版本的 angular,则应该使用trigger而不是triggerHandler

如果您需要应用停止传播,您可以按如下方式使用此方法:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
@DanielNalbach 在当前(而不是当前)Angular 版本 1.2+ 中,您必须使用triggerHandler而不是trigger
2021-03-16 13:18:05
我不太确定这仍然有效...... angularjs 1.6 这似乎不适用于完整的 jquery
2021-03-29 13:18:05
请解释为什么 $(elem).click() 不适用于 Angular?
2021-04-08 13:18:05
您使用的是什么版本的 angular。triggerHandler 似乎在 1.2.1 中工作正常:jsfiddle.net/t34z7
2021-04-11 13:18:05
如果您仅限于 jqLit​​e 并且不能使用选择器,请改为执行此操作: angular.element(document.querySelector('#mySelector')).trigger('click');
2021-04-12 13:18:05
angular.element(domElement).triggerHandler('click');

编辑: 看来您必须跳出当前的 $apply() 循环。一种方法是使用 $timeout():

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);

见小提琴:http : //jsfiddle.net/t34z7/

这应该是公认的答案。triggerHandler 有效。触发器不在 v1.2.25
2021-03-15 13:18:05
@deadManN$timeout是一项服务,因此在使用之前需要进行依赖注入docs.angularjs.org/api/ng/service/$timeout
2021-03-18 13:18:05
实际上,这应该是$timeout(fn, 0, false);为了不调用 $apply,不是吗?
2021-03-23 13:18:05
即使是这样,也没有工作,其投掷以下错误错误:[$ rootScope:inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply 在错误(原生)
2021-03-28 13:18:05
您可能想要使用 Angular 的$timeout而不是setTimeout,因为它$timeout$apply在必要时为您运行一个循环。它还使您的代码更具可测试性,因为 ngMock 使您可以完全控制$timeouts 的执行时间。docs.angularjs.org/api/ng/service/$timeout
2021-04-12 13:18:05

以下解决方案对我有用:

angular.element(document.querySelector('#myselector')).click();

代替 :

angular.element('#myselector').triggerHandler('click');
@jpmottin 我找到了,它必须放在 $timeout 中。谢谢
2021-03-21 13:18:05
@DotKu 也许您已经在 $scope 函数中,就像在 $timeout 函数中使用一样?换句话说,你不能在 $scope.$apply() 中调用 $scope.$apply() ......我希望这可以帮助你。
2021-04-03 13:18:05
OMG,Angular 完全毁了它。为什么他们不能模仿 jQuery 的$('#element').click()
2021-04-10 13:18:05

以防万一每个人都看到它,我添加了额外的重复答案和一条不会破坏事件传播的重要行

$scope.clickOnUpload = function ($event) {    
    $event.stopPropagation(); // <-- this is important

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
谢谢!这最终在 1.5.11 中对我有用,并且完全依赖 jquery。$timeout(function() { var el = document.getElementsByClassName('fa-chevron-up'); angular.element(el).trigger('click'); }, 0);
2021-03-13 13:18:05

使用普通的旧 JavaScript 对我有用:
document.querySelector('#elementName').click();

是的。为我工作。谢谢。
2021-04-04 13:18:05