如何以编程方式触发ngClick

mul*_*zzi 99 javascript jquery angularjs angularjs-ng-click

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

_ele.click();
Run Code Online (Sandbox Code Playgroud)

要么

_ele.trigger('click', function());
Run Code Online (Sandbox Code Playgroud)

如何才能做到这一点?

clo*_*pez 180

语法如下:

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

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

// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;
Run Code Online (Sandbox Code Playgroud)

有关Angular Extend方式的更多信息,请点击此处.

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

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

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

  • 如果您仅限于jqLit​​e并且不能使用选择器,请改为:angular.element(document.querySelector('#mySelector')).trigger('click'); (11认同)
  • 请解释为什么$(elem).click()不能与Angular一起使用? (10认同)
  • 你使用什么版本的角度.triggerHandler似乎在1.2.1中工作正常:http://jsfiddle.net/t34z7/ (4认同)
  • @DanielNalbach在当前(而不是当前)Angular版本1.2+中,你必须使用`triggerHandler`而不是`trigger` (3认同)

Bla*_*ago 83

angular.element(domElement).triggerHandler('click');
Run Code Online (Sandbox Code Playgroud)

编辑: 你似乎必须打破当前的$ apply()循环.一种方法是使用$ timeout():

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);
Run Code Online (Sandbox Code Playgroud)

请参阅小提琴:http://jsfiddle.net/t34z7/

  • 您可能希望使用Angular的`$ timeout`而不是`setTimeout`,因为`$ timeout`将在必要时为您运行`$ apply`循环.它还使您的代码更易于测试,因为ngMock可让您完全控制何时执行`$ timeout`.https://docs.angularjs.org/api/ng/service/$timeout (8认同)
  • @deadManN` $ timeout`是一个服务,因此需要依赖注入才能使用它https://docs.angularjs.org/api/ng/service/$timeout (4认同)
  • 即使这也不起作用,它抛出以下错误错误:[$ rootScope:inprog] http://errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error(native) (2认同)
  • 实际上这应该是`$ timeout(fn,0,false);`这样它不会调用$ apply,不应该吗? (2认同)
  • 这应该是公认的答案.triggerHandler有效.触发器不在v1.2.25中 (2认同)

jpm*_*tin 18

以下解决方案适合我:

angular.element(document.querySelector('#myselector')).click();
Run Code Online (Sandbox Code Playgroud)

代替 :

angular.element('#myselector').triggerHandler('click');
Run Code Online (Sandbox Code Playgroud)


Ult*_*ior 13

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

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

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
Run Code Online (Sandbox Code Playgroud)


cha*_*had 8

使用普通的旧JavaScript为我工作:
document.querySelector('#elementName').click();


Fiz*_*han 5

你可以这样做

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
Run Code Online (Sandbox Code Playgroud)


Mor*_*ard 5

最好的解决方案是使用:

domElement.click()
Run Code Online (Sandbox Code Playgroud)

因为 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