AngularJS自动完成IE9问题答案

【问题标题】：AngularJS Autocomplete IE9 IssueAngularJS自动完成IE9问题
【发布时间】：2015-06-09 20:03:42
【问题描述】：

我是 Angular JS 的新手，我正在使用 Angular Js 对登录页面进行表单验证。如果我输入用户名和密码，它工作正常但是如果我在浏览器中选择记住凭据并下次选择自动完成选项，我的提交按钮未启用。我只在 IE9 中遇到这个问题。对于其他浏览器来说，它工作正常。对此有任何建议。我的 login.html 看起来像这样：

<input ng-model="username" 
       class="login" 
       value="" 
       name="userId" 
       type="text" 
       required/>

<input ng-model="password" 
       class="login" 
       value="" 
       name="password" 
       type="password" 
       required/>

<button class="primaryButton" 
       type="submit" 
       ng-click="loginUser()" 
       ng-disabled="loginForm.$invalid"/>

另外，根据一篇博客，我尝试为此添加指令。通过添加指令，如果我选择自动完成选项并且只需鼠标单击某处，则启用提交按钮。但我不想在选择自动完成选项后点击。我的指令如下所示：

angular.module('sampleModule').directive('autofill', function autofill(){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
        scope.$watch(function () {
          return element.val();
        }, function(nv, ov) {
          if(nv !== ov) {
            ngModel.$setViewValue(nv);
          }
        });
    }
  };
})

【问题讨论】：

等等！使用 jquery 事件来监视元素更改......但我使用了一个简单的超时函数来监视它。我将在下面发布我的代码

标签： angularjs autocomplete

【解决方案1】：

您可能需要对指令的逻辑应用超时，以强制它提醒 IE 需要重新渲染。

angular.module('sampleModule').directive('autofill', ['$timeout', 
  function autofill($timeout){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
        scope.$watch(function () {
          $timeout(function () {
             return element.val();
          }, 0);
        }, function(nv, ov) {
          $timeout(function () {
            if(nv !== ov) {
              ngModel.$setViewValue(nv);
            }
          }, 0);
        });
    }
  };
}]);

【讨论】：

改用$timeout，不用担心摘要周期

【解决方案2】：

尝试每隔一段时间复制一次，因为 IE9（和 chrome）不会为用户和密码自动完成发出事件。

为输入设置各自的id，然后：

app.controller('yourController', function($scope, $interval) {

    $interval(function() {
        $scope.username = $('#username').val();
        $scope.password = $('#password').val();
    }, 1000);  // each 1 second
});

当然，您可以根据您的指令调整此解决方案。

【讨论】：

@pankajparkar：超时对我不起作用。当我申请超时时，它会在我打开登录页面后立即挂起浏览器。我无法继续登录，每次我不得不杀死浏览器。另外，我尝试将其值从 0 增加到 1000。这样一来，它会在打开登录页面 1 秒后挂起。
@joaozita：我尝试在指令中添加间隔方法，但它对我也不起作用。它不会更新用户名和密码值。
我创建了一个新指令来尝试它......我将发布......我的代码中也有同样的问题，我现在正在尝试解决。

【解决方案3】：

尝试使用指令从元素调用更改：

directive('monitorAutoFill', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, el, attrs, ctrl) {
            $timeout(function() {
                el.trigger('change');
            }, 500);
        }
    };
});

并且，根据您的输入：

<input ng-model="username" 
   class="login" 
   value="" 
   name="userId" 
   type="text" 
   required
   monitor-auto-fill />

<input ng-model="password" 
   class="login" 
   value="" 
   name="password" 
   type="password" 
   required
   monitor-auto-fill />

【讨论】：

该指令在 Chrome 上运行良好。你试过IE9吗？