javascript kullanarak AngularJS giriş metni değerini değiştir

Question

Bir web sitesinde bir form doldurma işlemini otomatikleştirmek için bir tarayıcı uzantısında javascript çalıştırmaya çalışıyorum ve bir düğmeyi tıklatıyorum - uzantı kodu javascript yazarak simüle edilebilir: adres çubuğuna kodu.

Sorun yaşadığım web sitesi angularJS kullanır. Giriş alanı kimlikleri isimleri var ve giriş alanı değerlerini değiştirmek için kullanıyorum. Alanlar doldu ama düğmeyi tıklattığımda bunların doldurulmadığını, hiçbir değer olmadığını ve hepsinin hatalı olduğunu söylüyor. Değerleri el ile girmedikçe, değişikliklerimi "görmüyor" gibi bazı doğrulamalar devam ediyor.

Sadece giriş alanının kimliğini kullanarak doğrulama yapan AngularJS giriş alanlarının değerini değiştirmek için basit bir yol var mı?

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

denemelerim document.getElementById("shippingAddr-first-name").value="Dave"; değişikliği alan kullanarak ancak form gönderme sırasında düzgün kayıt yoktur: Burada

kodudur. Ancak el ile yazıyorsam çalışır. Elle yaptığım bazı şeyleri simüle etmek için click(), blur(), focus() işlevlerini de denedim, ancak bunlar da çalışmıyor.

Answer 1

Tetik input olay observab olduğu AngularJS tarafından le. kavramının

// 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); 
    } 
    } 

Bazı çalışma kanıtı:

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>

Eğik bazı değişiklikler meydana gelir bilir ve döngü sindirmek $

Bazı kaynak kodu çalıştırmak zorundadır nerede Olay input gelen yoludur

Answer 2

kullanım angular.element

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

Answer 3

sen/set giriş değeri elde etmek o değerini değiştirmek gerekir böylece yapabileceğiniz kontrolör Sen, sen girişinde bir ng-model koymak angularjs bağlanma verileri kullanmalıdır

: ng model niteliğiyle elemanın

JSFiddle

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