密码复选框字段AngularJS最小/最大长度问题

Question

我做了一个密码字段，显示检查复选框时的密码。
我使用ng-minlenght和ng-maxlength来控制密码长度。

当密码在输入字段的最小和最大长度之间时，它将显示密码文本。

但是，当密码无效/不在字段的最小和最大长度之间时，我会得到一个emtpy值。

Plnkr Example

这是在角中的错误还是我做错了什么？

Answer 1

这是通过设计，但我找不到明确声明它的文档中的任何参考。在满足验证条件之前，角度不会改变您的模型。您可以看到通过在输入上方添加{{user.password}}来证明（here）。在输入8个字符之前，您不会在页面上看到文字。

您可以通过使用一个指令，手动同步像两个文本字段，以便解决这个问题：

http://jsfiddle.net/langdonx/K6Qgm/11/

HTML

<div ng-app="app" ng-controller="x"> 
    password is: {{user.password}} 
    <br/> 
    <br/> 
    standard input: 
    <input ng-model="user.password" name="uPassword" type="password" ng-hide="isChecked" ng-minlength="8" ng-maxlength="20" placeholder="Password" required/> 
    <br/> 
    <br/> 
    password directive: 
    <password ng-model="user.password" name="uPassword" /> 
</div> 

的JavaScript

function x($scope) { 
    $scope.user = { 
     password: 'x' 
    }; 
} 

angular.module('app', []) 
    .directive('password', function() { 
    return { 
     template: '' + 
      '<div>' + 
      ' <input type="text" ng-model="ngModel" name="name" ng-minlength="8" ng-maxlength="20" required />' + 
      ' <input type="password" ng-model="ngModel" name="name" ng-minlength="ngMinlength" required />' + 
      ' <input type="checkbox" ng-model="viewPasswordCheckbox" />' + 
      '</div>', 
     restrict: 'E', 
     replace: true, 
     scope: { 
      ngModel: '=', 
      name: '=' 
     }, 
     link: function (scope, element, attrs) { 
      scope.$watch('viewPasswordCheckbox', function (newValue) { 
       var show = newValue ? 1 : 0, 
        hide = newValue ? 0 : 1, 
        inputs = element.find('input'); 
       inputs[show].value = inputs[hide].value; 
       inputs[hide].style.display = 'none'; 
       inputs[show].style.display = ''; 
      }); 
     } 
    }; 
});