1 drPassword指令
directives.directive('drPassword', function () {
return {
restrict:'AE',
replace:true,
scope:{drModel:'='},
templateUrl:'js/directive/tpl/tpl-password.html',
link: function (scope,element, attrs) {
var input = element.find('input');
if (angular.isDefined(attrs.ngMinlength)){
input.attr('ng-minlength',attrs.ngMinlength);
}
if (angular.isDefined(attrs.placeholder)){
input.attr('placeholder',attrs.placeholder);
}
scope.passtype = 'password';
scope.eyeclass=false;
scope.togglePass = function () {
if(scope.passtype=='password'){
scope.passtype = 'text';
scope.eyeclass=true;
}else{
scope.passtype = 'password';
scope.eyeclass=false;
}
}
}
}
});
2 tpl-password.html
这个模板内容也可根据你们的需求,进行调整,注意item要用div,不能用label,否则图片获取不到焦点。
<div class="item item-input">
<i class="icon ion-android-lock positive padding-right"></i>
<input type="{{passtype}}" ng-model="drModel" autocomplete="off" required />
<i class="icon ion-ios-eye padding-right" ng-class="{true:'positive'}[eyeclass]" ng-click="togglePass()" ></i>
</div>
3 html中使用
controller不需要做什么处理,这也是 angularjs的强项
<dr-password placeholder="请设置密码" dr-model="user.password" ng-minlength="6" ></dr-password>