My main goal is to change the input type of a password to text by cliking a checkbox.
Understanding that DOM manipulations should be done in a directive and after reading AngularJS: can't change input type
I stared my directive as follows ( All code included in jsfiddle )
<div ng-app="SignComponents">
<bca-sign-up-password> </bca-Sign-Up-Password>
</div>
However I did not really make it work yet . . . any suggestions? I am working it out in the angular way?
Thanks!
First off, element.html is a method not a property, so yo were overwriting the function inside of your scope.$watch callback. Second, it's much easier on everyone (yourself, Angular, the browser) to just change the input type:
scope.$watch('viewPasswordCheckbox', function (newValue) {
element.find('input')[1].type = newValue ? 'password' : 'text';
});
Edit: If you really need to support older versions of IE (the above works in 9), you can render the input twice and show/hide it like this: http://jsfiddle.net/K6Qgm/7/
function (newValue) {
var show = newValue ? 2 : 1,
hide = newValue ? 1 : 2,
elements = element.find('input');
elements[hide].style.display = 'none';
elements[show].style.display = '';
});
Using ng-hide and ng-show is better then doing it manually, maybe something like this for the directive template:
<div>
<input
required
type="text"
name="password"
class="input password"
placeholder="Password"
ng-hide="viewPassword"
ng-model="user.Password"
>
<input
required
name="password"
type="password"
class="input password"
placeholder="Password"
ng-show="viewPassword"
ng-model="user.Password"
>
<input type="checkbox" class="btn btn-mini" ng-click="showPassword()">
</div>
the linking function:
var linker = function(scope, element, attrs){
scope.viewPassword = true;
scope.showPassword = function(){
scope.viewPassword = !scope.viewPassword;
};
};
working example plunker.
How about creating 2 input field, One with input type=text and 2nd of input type=password pointing to same ng-model=user.password" and use checkbox (showpassword) to control which input is displayed.
<input ng-hide="showpassword" type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" />
<input ng-show="showpassword" type="text" name="password" class="form-control" ng-model="user.password" />
<input type="checkbox" ng-model="showpassword" ng-checked="false"> Show Password
