Триггер angular событие элемента из обычного JavaScript

Question

Я пытаюсь автоматически заполнить страницу, написанную с использованием Angular, которую я загружаю в веб-просмотр в моем приложении.

На странице есть элемент, имеющий следующий синтаксис:

<input id="element" ng-model="model" ng-blur="onInput('input')">

Теперь я заполняю данные из своего приложения в поле, вводя JS.

document.getElementById("element").value = "myvalue"

Однако событие ng-blur не запускается. Если я вручную ввожу данные в поле, оно срабатывает. Как запустить событие ng-blur?

Я пробовал вызвать обычный обработчик onblur для элемента, но это null. Также попытался выполнить eval следующим образом:

let elem = document.getElementById("element")
eval(elem.attributes["ng-blur"])

Но это тоже не удалось, потому что область видимости неверна. Как запустить angular событий из обычного JavaScript?

Answer 1

Размытие срабатывает, когда элемент теряет фокус, поэтому при нажатии снаружи. Изменение значения ввода не приведет к срабатыванию этого события.

Здесь вы можете использовать ngModelChange точно так же:

<input id="element" [(ngModel)]="model" (ngModelChange)="onInput($event)">

ngModelChange довольно явно, он запускается, когда значение ngModel изменено

Более того, я не уверен, что использование ngModel без скобок и скобок работает, но, возможно, это синтаксис, которого я не знаю.

Последнее: в angular вы получаете элементы with 'ViewChild'

Просто поместите ссылку на такой элемент:

<input id="element" #someInput [(ngModel)]="model" (ngModelChange)="onInput($event)">

Затем в свой машинописный текст вам нужно импортировать ViewChild

import {Component,ViewChild} from '@angular/core';

и использовать его вот так:

export class AppComponent implements AfterViewInit {
   @ViewChild('someInput') someInput: Any;
   ngAfterViewInit() {
      this.someInput.value = 'Hey';
   }
 }