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

input具有ng-model属性的元素的触发事件,可由AngularJS观察.事件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>