Question

我是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);
          }
        });
    }
  };
})

Answer 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);
        });
    }
  };
}]);

Answer 2

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

为输入设置相应的ID，然后：

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

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

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

Answer 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 />

AngularJS自动完成IE9问题

3 个答案: