logo标签列表

如何以编程方式触发ngClick

javascriptjqueryangularjsangularjs-ng-click
112

我希望在运行时触发一个元素的ng-click，例如：

_ele.click();

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

如何完成此操作？

4
不，我想了解手动触发ng-click的机制。 - mulla.azzi
10个回答
189

语法如下：

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>
4
你使用的是哪个版本的Angular？在1.2.1中，triggerHandler似乎运行良好：http://jsfiddle.net/t34z7/ - Blago
14
请解释为什么 $(elem).click() 在 Angular 中无法工作？ - Sergii Shevchyk
13
如果你只能使用jqLite并且不能使用选择器，那么可以尝试这样做：angular.element(document.querySelector('#mySelector')).trigger('click');。这段代码可以触发一个ID为"mySelector"的元素的点击事件。 - Daniel Nalbach
3
在当前（以及较旧的）Angular版本1.2+中，您需要使用triggerHandler而不是trigger。 - yorch
1
我不太确定这是否仍然有效...angularjs 1.6似乎无法与完整的jquery一起使用。 - George Mauer
显示剩余2条评论
84
angular.element(domElement).triggerHandler('click');

编辑： 看起来你需要跳出当前的$apply()循环。一种方法是使用$timeout():

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

请查看代码片段：http://jsfiddle.net/t34z7/

2
即使这个不起作用，它仍然会抛出以下错误：Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native) - mulla.azzi
9
建议您使用Angular的$timeout而不是setTimeout，因为$timeout会在必要时运行$apply周期。这还使您的代码更易于测试，因为ngMock让您完全控制何时执行$timeout。https://docs.angularjs.org/api/ng/service/$timeout - WildlyInaccurate
2
实际上应该是 $timeout(fn, 0, false); 这样它就不会调用 $apply，是吗？ - Martin Probst
2
这应该是被接受的答案。 triggerHandler 起作用了。在 v1.2.25 中，trigger 不起作用。 - Howie
4
$timeout是一个服务，因此在使用它之前需要进行依赖注入。参考文档：https://docs.angularjs.org/api/ng/service/$timeout - WildlyInaccurate
显示剩余7条评论
20

以下解决方案对我有效：

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

而不是：

angular.element('#myselector').triggerHandler('click');
@DotKu 也许你已经在一个 $scope 函数中，比如当你在 $timeout 函数中使用时？换句话说，在 $scope.$apply() 中不能再调用 $scope.$apply()... 希望这能帮到你。 - jpmottin
@jpmottin，我找到了，它必须放在$timeout中。谢谢。 - Weijing Jay Lin
1
哦，Angular 完全毁了它。为什么他们不能模仿 jQuery 的 $('#element').click() 呢？ - Jhourlad Estrella
13

以防万一每个人都能看到，我添加了一个额外的重复答案，并包含一条重要的语句，这不会破坏事件传播。

$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); - Florida G.
10

对我而言，使用纯JavaScript就可以实现：
document.querySelector('#elementName').click();

好的，对我来说可以。谢谢。 - ktaro
6
4

您可以像这样做

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
1
我在我的ng 1.5.3应用程序中为这个解决方案遇到了这个错误：通过选择器查找元素不受jqLite支持。 - Todd Hale
1

这段代码将无法运行（在点击时会抛出错误）：

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

您需要按以下方式使用querySelector:

$timeout(function() {
   angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
1
简单示例：

HTML

HTML

<div id='player'>
    <div id="my-button" ng-click="someFuntion()">Someone</div>
</div>

JavaScript
$timeout(function() {
    angular.element('#my-button').triggerHandler('click');
}, 0);

这段代码会寻找按钮的id并执行点击操作。完成了。
来源: https://techiedan.com/angularjs-how-to-trigger-click/
0

在想要触发点击事件的方法中，包含以下行：

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接