Изменение значения текстового значения AngularJS с помощью javascript

Question

Я пытаюсь запустить javascript в расширении браузера, чтобы автоматизировать процесс заполнения формы на веб-сайте, а затем нажать кнопку - код расширения можно моделировать, набрав javascript: кода в адресную строку.

Веб-сайт, на котором у меня возникают проблемы с использованием angularJS. У меня есть имена идентификаторов поля ввода, и я использую их для изменения значений полей ввода. Поля заполняются, но когда я нажимаю кнопку, она говорит, что они не заполнены, нет значений, и все они ошибаются. Выполняется некоторая проверка, которая не «видит» мои изменения, если я не буду вводить значения вручную.

Есть ли простой способ изменить значение полей ввода 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"; изменения поля, но не правильно зарегистрировать во время отправки формы. Однако он работает, если я набираю его вручную. Я также попытался щелкнуть(), blur(), focus(), чтобы имитировать некоторые вещи, которые я могу делать вручную, но они тоже не работают.

Answer 1

Триггер input событие на элемент с атрибутом нг-модели, которая является observab le by AngularJS. Событие input путь откуда Угловая знает, что некоторые изменения происходит, и она должна работать $ переваривать цикл

Некоторые исходный код:

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

использование angular.element

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

Answer 3

Вы должны использовать привязку данных из AngularJS, вы положили ng-model на входе, так что вы должны изменить это значение, чтобы получить/установить значение входного сигнала, у вас контроллер вы можете сделать :

JSFiddle

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