Arcayne Arcayne - 2 months ago 9
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>
</div>


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

Thanks!

Answer

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:

http://jsfiddle.net/K6Qgm/6/

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 = '';
});
Comments