使用javascript更改AngularJS输入文本值

Question

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

我遇到问题的网站使用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

inputAngularJS可以观察到具有ng-model属性的元素上的触发事件。事件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);
    }
  }

一些可行的概念证明：

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()

  }

})


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