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

在具有 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);
    }
  }

一些工作的概念证明：

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>

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");