forms – 密码复选框字段AngularJS min / maxlength issue

这是设计使然,但我无法在明确说明它的文档中找到任何参考.在满足验证标准之前,Angular不会更改您的模型.您可以通过在输入上方添加{{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 = '';
            });
        }
    };
});