Arcayne Arcayne - 1 year ago 63
AngularJS Question

Change input type using directives by checkbox click

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>

However I did not really make it work yet . . . any suggestions? I am working it out in the angular way?


Answer Source

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:

function (newValue) {
    var show = newValue ? 2 : 1,
        hide = newValue ? 1 : 2,
        elements = element.find('input');
    elements[hide].style.display = 'none';
    elements[show].style.display = '';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download