仅使用 javascript 和元素单击 angularjs 按钮

Question

我正在开发一个浏览器扩展程序，它会自动单击页面上的按钮。该代码适用于所有网站，除了带有 angularjs 的网站。

以下代码是我尝试单击 angularjs 按钮并让它注册单击，但它不起作用。

//applyButton is the button element.
if(angular) {
     var e = angular.element(applyButton);
     e.trigger('click');
     e.scope().$apply();
 } else {
     applyButton.click();
 }

这是未注册“点击”的 applyButton 的 Angular html 代码

<input value="Apply" class="apply button gift-card-apply" data-ng-click="!orderSubmitErrors.giftCard.sectionHasErrors &amp;&amp; applyGiftCard($event)" client-validation="onSubmit,giftCard,validateSubsection" type="button">

如果我只能访问这些项目的 document.element，是否有最佳做法来单击按钮并从 javascript 更改 angularjs 的输入字段？

Answer 1

看来您需要将元素包装在 $timeout 中才能在元素上调用 .click。请注意以下简化示例...

<div ng-app="app" ng-controller="ctrl">
    <button id="btn" ng-click="click()">click</button>
</div>

---

var app = angular.module('app', []).controller('ctrl', function($scope, $timeout) {
    $scope.click = function() {
        console.log('click');
    }

    $timeout(function() {
        angular.element(document.getElementById('btn')).trigger('click')
    });

    //does not work
    angular.element(document.getElementById('btn')).trigger('click')
});

有了这个，您将不需要调用e.scope().$apply(); - $timeout 将在必要时调用一个循环。此外，虽然您没有在示例中指定，但 .trigger() 需要 jQuery 并且没有融入 AngularJS 的 jqLit​​e，这毫无价值。

JSFiddle Link - 演示