AngularJs form - 如何监听输入事件？

Question

我希望能够触发一个功能，当一个表单的输入（不是特定的）被点击或聚焦（并不重要）时......然后为表格所在的模型 window。

这是标记

    <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

Answer 1

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

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

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

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

$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';
      });
  }
}

AngularJs form - 如何监听输入事件？

AngularJs form - How to watch for input events?

angularjs

angularjs-material