我在输入复选框时创建了一个显示密码的密码字段.
我正在使用ng-minlenght和ng-maxlength来控制密码长度.
我正在使用ng-minlenght和ng-maxlength来控制密码长度.
当密码介于输入字段的最小和最大长度之间时,它会显示密码文本.
但是当密码无效/不在字段的最小和最大长度之间时,我得到一个emtpy值.
这是Angular中的错误还是我做错了什么？
解决方法
这是设计使然,但我无法在明确说明它的文档中找到任何参考.在满足验证标准之前,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 = '';
});
}
};
});
