AngularJS中IE11下input绑定datalist时ng-change不触发问题

这绝对是IE11的经典兼容性坑了——我之前在项目里也踩过一模一样的雷。问题根源在于IE11对<datalist>元素的事件触发逻辑和Chrome不一样：Chrome会在用户选择datalist选项时立即触发input的change事件，而IE11只在输入框失去焦点（blur）时才会触发，这就导致AngularJS的ng-change指令在IE11里没法及时响应选项选择动作。

下面是我亲测有效的解决方案，通过自定义AngularJS指令来补全IE11的事件支持：

步骤1：创建自定义指令 #

在你的AngularJS模块中添加这个指令，专门处理IE11的datalist事件兼容：

angular.module('yourAppModule').directive('ieDatalistChange', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 检测当前浏览器是否为IE11
      const isIE11 = navigator.userAgent.indexOf('Trident/7.0') > -1;
      if (!isIE11) return;

      // 监听input事件——IE11选择datalist选项时会触发这个事件
      element.on('input', function() {
        const inputValue = element.val();
        // 获取对应的datalist元素
        const datalist = document.getElementById(attrs.list);
        if (!datalist) return;

        // 检查输入值是否匹配datalist中的选项
        const options = Array.from(datalist.options);
        const isMatchedOption = options.some(opt => opt.value === inputValue);
        
        if (isMatchedOption) {
          scope.$apply(() => {
            // 手动更新ngModel的值
            ngModelCtrl.$setViewValue(inputValue);
            // 触发ng-change绑定的方法
            if (attrs.ngChange) {
              scope.$eval(attrs.ngChange);
            }
          });
        }
      });
    }
  };
});

步骤2：在input标签上使用指令 #

只需要给你的input元素加上ie-datalist-change属性即可：

<input list="testList" name="origin node" 
       ng-model="SelectedDoctor" 
       ng-change="LoadSessionData(SelectedDoctor)" 
       autocomplete="off" required
       ie-datalist-change />

<datalist id="testList">
  <option value="{{value.id}}" ng-repeat="value in data"></option>
</datalist>

原理说明 #

这个指令会先判断当前浏览器是否是IE11，是的话就监听input的input事件——当用户从datalist中选择选项时，IE11会触发这个事件。然后我们检查输入的值是否存在于datalist的选项中，如果匹配，就手动更新ngModel的视图值，并触发ng-change绑定的方法，这样就能让IE11的行为和Chrome保持一致了。

另外要注意保留autocomplete="off"，避免浏览器自带的自动补全功能干扰datalist的正常工作。

内容的提问来源于stack exchange，提问作者Vijay Venugopal Menon