AngularJs 表单 - 如何监视输入事件？答案

【问题标题】：AngularJs form - How to watch for input events?AngularJs 表单 - 如何监视输入事件？
【发布时间】：2021-04-15 11:35:53
【问题描述】：

我希望能够触发一个函数，当表单的输入之一（不是特定的输入）被单击或聚焦（并不重要）时...然后为模型窗口设置背景颜色表格在其中。

这是标记

    <md-dialog-content ng-style="{'background-color':newColor}">
  <div class="md-dialog-content">
  <form name="userForm" >
        <div layout-gt-xs="row">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Company</label>
            <input ng-model="user.company">
          </md-input-container>

          <md-input-container>
            <label>Enter date</label>
           <input ng-model="user.date">
          </md-input-container>
        
      </div>

 </form>
  </div>
</md-dialog-content>

我尝试通过 Angular.element 和 jquery 来监听事件

 angular.element(document.querySelectorAll('[name="userForm"]')).on('focus', function() {
    $scope.newColor = 'red';
  });

但是 - 运气不好，

Example

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

首先：AngularJS（即Angular 1）现在已经过时了。 Angular 的当前版本是 Angular 11。虽然到 2021 年底仍有 LTS，但对于新项目，您应该考虑使用当前的 Angular 版本。

至于你的问题。您的代码有两个问题：

form 不会触发 focus 事件
当您尝试添加事件处理程序时，对话框元素还不是 DOM 的一部分，因此您的 document.querySelectorAll 将找不到任何元素

一种可能性是在$mdDialog.show 中使用onComplete hook。这将在show 动画完成后被调用，因此对话框模板的所有元素都已渲染。在这个 oncompletehandler 中，您可以查询input 元素，而不是查询表单。可能有必要对查询做一些进一步的限制，因为您当然可能在文档中有额外的inputs。

$mdDialog.show({
  controller: DialogController,
  templateUrl: 'dialog1.tmpl.html',
 
  parent: angular.element(document.body),
  targetEvent: ev,
  clickOutsideToClose: true,
  fullscreen: $scope.customFullscreen, // Only for -xs, -sm breakpoints.
  onComplete: (scope) => {
      angular.element(document.querySelectorAll('input')).on('focus', function() {
         scope.newColor = 'red';
      });
  }
}

【讨论】：

谢谢 - ?这就是我想要的。