如何以编程方式触发ngClick

时间:2014-03-17 05:09:08

标签: javascript jquery angularjs angularjs-ng-click

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

_ele.click();

OR

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

如何做到这一点?

10 个答案:

答案 0 :(得分:175)

语法如下:

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 way here的更多信息。

如果您使用旧版角度,则应使用触发器而不是 triggerHandler

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

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

答案 1 :(得分:82)

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

修改 看来你必须打破当前的$ apply()循环。一种方法是使用$ timeout():

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

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

答案 2 :(得分:18)

以下解决方案对我有用:

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

而不是:

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

答案 3 :(得分:13)

为了防止每个人都看到它,我添加了一个重要的答案,其中包含一条不会破坏事件传播的重要行

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

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

答案 4 :(得分:7)

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

答案 5 :(得分:5)

你可以这样做

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

答案 6 :(得分:4)

最佳解决方案是使用:

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 :(得分:1)

简单示例:

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/

答案 8 :(得分:0)

此代码不起作用(单击时引发错误):

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

您需要按以下方式使用 querySelector

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

答案 9 :(得分:0)

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

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