如何以编程方式触发 ngClick

Posted 2023-02-19

【中文标题】如何以编程方式触发 ngClick

【英文标题】：How to trigger ngClick programmatically

【发布时间】：2014-04-22 05:53:35

【问题描述】：

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

_ele.click();

或

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

如何做到这一点？

【问题讨论】：

不，我想知道手动触发ng-click的机制。

【参考方案1】：

语法如下：

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 扩展方式 here.

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

如果您需要应用停止传播，您可以使用此方法，如下所示：

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>

【讨论】：

您使用的是什么版本的 Angular。 triggerHandler 似乎在 1.2.1 中工作正常：jsfiddle.net/t34z7

请解释为什么 $(elem).click() 不适用于 Angular？

如果您受限于 jqLit​​e 并且不能使用选择器，请改为：angular.element(document.querySelector('#mySelector')).trigger('click');跨度>

@DanielNalbach 在当前（而不是当前）Angular 版本 1.2+ 中，您必须使用 triggerHandler 而不是 trigger

我不太确定这是否仍然有效...angularjs 1.6 这似乎不适用于完整的 jquery

【参考方案2】：

angular.element(domElement).triggerHandler('click');

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

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

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

【讨论】：

即使这也不起作用，它会抛出以下错误 Error: [$rootScope:inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)

您可能希望使用 Angular 的 $timeout 而不是 setTimeout，因为 $timeout 将在必要时为您运行 $apply 循环。它还使您的代码更具可测试性，因为 ngMock 让您可以完全控制何时执行 $timeouts。 docs.angularjs.org/api/ng/service/$timeout

实际上应该是$timeout(fn, 0, false);，这样它就不会调用$apply，不是吗？

这应该是公认的答案。 triggerHandler 工作。触发器在 v1.2.25 中没有

@deadManN $timeout 是一项服务，因此需要进行依赖注入才能使用它docs.angularjs.org/api/ng/service/$timeout

【参考方案3】：

以下解决方案对我有用：

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

而不是：

angular.element('#myselector').triggerHandler('click');

【讨论】：

@DotKu 也许您已经在 $scope 函数中，就像您在 $timeout 函数中使用时一样？换句话说，您不能在 $scope.$apply() 中调用 $scope.$apply()... 我希望这对您有所帮助。

@jpmottin 找到了，必须放在$timeout中。谢谢

天啊，Angular 彻底毁了它。为什么他们不能模仿 jQuery 的 $('#element').click()

【参考方案4】：

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

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

【参考方案5】：

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

【讨论】：

是的。为我工作。谢谢。

【参考方案6】：

最好的解决办法是使用：

domElement.click()

因为 angularjs triggerHandler(angular.element(domElement).triggerHandler('click')) 点击事件不会在 DOM 层次结构中冒泡，但上面的事件会冒泡 - 就像普通的鼠标点击一样。

https://docs.angularjs.org/api/ng/function/angular.element

http://api.jquery.com/triggerhandler/

https://developer.mozilla.org/en-US/docs/Web/API/htmlElement/click

【参考方案7】：

你可以这样做

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

【讨论】：

我在我的 ng 1.5.3 应用程序中收到此解决方案的此错误：jqLit​​e 不支持通过选择器查找元素。

【参考方案8】：

此代码不起作用（点击时抛出错误）：

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

您需要按如下方式使用querySelector：

$timeout(function() 
   angular.element(document.querySelector('#btn2')).triggerHandler('click');
);

【参考方案9】：

简单示例：

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/

【参考方案10】：

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

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
);