使用 Datalist 输入 - AngularJS 的 IE 中不会触发 ng-change答案

【问题标题】：Input with Datalist - ng-change is not fired in IE for AngularJS使用 Datalist 输入 - AngularJS 的 IE 中不会触发 ng-change
【发布时间】：2021-02-08 19:18:55
【问题描述】：

我有一个带有 datalist 的输入标签，在 Internet Explorer 11 中选择时不会触发 ng-change。它只会在输入模糊时触发。它在 Chrome 中运行。

代码笔如下： https://codepen.io/vijayvmenon/pen/gzLYgp

<input list="testList" name="origin node" ng-model="SelectedDoctor" 
       ng-change="LoadSessionData(SelectedDoctor)" 
       autocomplete="off" required /> 
<datalist id="testList" > 
   <option value={{value.id}} ng-repeat="value in data"> 
</datalist>
  <p>{{selectedVal}}</p>

如果您检查代码，您可以看到在 chrome 中，数据列表值在选择时显示在下方。在 IE 中，该值仅在按 Tab 键或单击标签外部时显示。

请告诉我如何在 IE 中使用它，以便在选择 datalist 值时触发 ng-change。

注意：如果您将 AngularJS 版本更改为 1.2.x，它可以正常工作。上面的任何东西，它都不起作用。这是一个用于更大应用程序的简化版本，我在从数据列表中选择时触发后端服务。

【问题讨论】：

标签： javascript angularjs angularjs-ng-change

【解决方案1】：

要达到预期的效果，请在输入字段中使用以下 oninput 事件选项

<input list="testList" name="origin node" ng-model="SelectedDoctor" oninput = "angular.element(document.getElementById('check')).scope().LoadSessionData(this)" autocompletestListte="off" required /> 
<datalist id="testList" >

ng-change 没有被触发，因为 ng-click 或 ng-change 不起作用的数据列表

为范围变量 - selectedVal 赋值后，运行 $scope.$apply() 以查看 UI 上的选定选项

代码示例 - https://codepen.io/nagasai/pen/jxVOrp

【讨论】：

谢谢 Naga Sai。这按预期工作！感谢您的帮助！
我不建议混合使用原生 JavaScript 事件处理程序，例如 oninput 和 AngularJS 回调！

【解决方案2】：

AngularJS 忽略 Internet Explorer 11 中的 input 事件，因为 Microsoft 对 input 的支持非常有问题。但是，您可以实现自己的指令并将其分配给元素，以便在发生 input 事件时自己发出 change 事件。

.directive('input', function() {
  return {
    link: function(scope, element, attrs) {
      element.on('input', function() { element.triggerHandler('change'); });
    }
  };
});

我不建议使用oninput 属性，因为您应该始终坚持使用ng-* 属性，不要混淆AngularJS 回调和原生JavaScript 事件处理程序。使用oninput，您最终可能会遇到有关 AngularJS 数据模型的其他问题。

【讨论】：