Question

我正在尝试在浏览器扩展程序中运行javascript以自动完成在网站上填写表单然后单击按钮的过程 - 可以通过在地址栏中键入javascript：code来模拟扩展代码。 / p>

我遇到问题的网站使用angularJS。我有输入字段ID的名称，并使用它们来更改输入字段值。字段填满但是当我点击按钮时它表示它们没有填充，没有值，它们都是错误的。除非我手动输入值，否则会进行一些不会“看到”我的更改的验证。

是否有一种简单的方法来更改仅使用输入字段的id进行验证的AngularJS输入字段的值。

以下是代码：

<input id="shippingAddr-first-name" type="text" class="first-name ng-pristine ng-valid" maxlength="16" data-ng-model="addressTypes[addressType].FirstName" focus-me="commonAddressTypeProps[addressType].focusOnFirstName" client-validation="onExit" data-required-on-exit="">

我尝试使用 document.getElementById("shippingAddr-first-name").value="Dave";更改字段但在表单提交期间未正确注册。但是，如果我手动输入它，它确实有效。我还尝试了click()，blur()和focus()来模拟我可能手动执行的一些操作，但这些操作也不起作用。

Answer 1

使用AngularJS可观察的ng-model属性触发元素input事件。事件input是Angular知道发生了一些变化并且必须运行$ digest循环的方式

一些源代码：

// if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
  // input event on backspace, delete or cut
  if ($sniffer.hasEvent('input')) {
    element.on('input', listener);
  } else {
    var timeout;

    var deferListener = function(ev, input, origValue) {
      if (!timeout) {
        timeout = $browser.defer(function() {
          timeout = null;
          if (!input || input.value !== origValue) {
            listener(ev);
          }
        });
      }
    };

    element.on('keydown', function(event) {
      var key = event.keyCode;

      // ignore
      //    command            modifiers                   arrows
      if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;

      deferListener(event, this, this.value);
    });

    // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it
    if ($sniffer.hasEvent('paste')) {
      element.on('paste cut', deferListener);
    }
  }

一些有效的概念验证：

＆＃13;

angular.module('app', []).controller('app', function($scope) {
  $scope.user = {}
  $scope.handleSubmit = function(user) {
    alert('passed name ' + JSON.stringify(user))
  }
})

$(function() {
  $('#run').click(function() {
    fillElement($('[ng-model="user.name"]'), 'some user name')
    sendForm($('[ng-submit="handleSubmit(user)"]'));
  })

  function fillElement($el, text) {
    $el.val(text).trigger('input')
  }

  function sendForm($form) {
    $form.submit()
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div>
  <button id="run">Execute `input` event outside AngularJS</button>
</div>
<div ng-app="app">
  <div ng-controller="app">
    <form ng-submit="handleSubmit(user)">
      <input type="text" ng-model="user.name" />
      <input type="submit" id="submit" value="Submit" />
    </form>
  </div>
</div>

＆＃13;

Answer 2

您应该使用AngularJS的数据绑定，在输入上放置ng-model，因此您需要更改该值以获取/设置输入值，您可以在控制器中执行此操作：

JSFiddle

.controller('myCtrl', function ($scope) {
    $scope.addressTypes = [];
    $scope.addressTypes['onetype'] = { FirstName: 'Dave'};
});

Answer 3

使用angular.element

angular.element(document.querySelector("#shippingAddr-first-name")).val("Dave");

使用javascript

3 个答案: