CODEWITHSUNDEEP
angularjsangularjs-directive
ojus kulkarni
ojus kulkarni

Reputation: 1907

AngularJs - show-hide password on click event using directive

I have one input field for password and one button with that input field
now, if type of input field is passwordi.e type="password", then on click of that button it should become text i.e type="text"
if again I click on the same button it should change type="password"

Means it should toggle the value of type of input element

I have done this using controller, It's working fine with controller. below is the working code using controller

But instead of controller if i want to use directive then how to handle this toggle condition using directive

purpose - I want to use this functionality on multiple input elements

HTML

<div class="input-group">
   <label>Password</label>
   <input type="{{inputType}}" class="form-control" ng-model="password" />
   <span ng-click="show()">show</span>
</div>

Controller

$scope.inputType = 'password';

$scope.show = function() {
  if ($scope.inputType === 'password') {
     $scope.inputType = !$scope.inputType;
     $scope.inputType = 'text';
  } else {
     $scope.inputType = !$scope.inputType;
     $scope.inputType = 'password';
  }
}

I tried using Directive - Below is my trial code
I am not getting how to change the type of <input /> element using directive

Directive

.directive('myDir', function() {
    require: 'ngModel',
    link: function (scope, element, attrs) {
       console.log(attrs.type);
       attrs.type = 'password'

      // how to call this below code on click event or on click of <span>  
         which I am using for password

       if (attrs.type === 'password') {
          attrs.type = !attrs.type;
          attrs.type = 'text';
       } else {
          attrs.type = !attrs.type.inputType;
          attrs.type = 'password';
       }
    }
})

HTML Using Directive

<div class="input-group">
   <label>Password</label>
   <input my-dir type="" class="form-control" ng-model="password" />
   <span ng-click="show()">show</span>
</div>

Upvotes: 1

Views: 3144

Answers (2)

Gaurav Kumar Singh
Gaurav Kumar Singh

Reputation: 1570

You can use ng-attr-type directive for dynamically change the input type. For example:

<input ng-attr-type="{{ isPassword ? 'password' : 'text' }}">

you can change the value of isPassword to the click event and make it toggle.

Using directive

.directive('isPassword', function() {
  return {
    restrict : 'A', 
    scope: {
      isPassword: '=isPassword'
    },
    link: function (scope, element, attrs) {
       scope.$watch('isPassword', function(a, b){
         element.attr('type', a ? 'password' : 'text')
       })
    }
  }
});

<input is-password="checkPassword" placeholder="Put your password" />

<input type="checkbox" ng-model="checkPassword" />

update on button click

<button ng-click="checkPassword=!checkPassword">click</button>

Upvotes: 5

Gowthaman
Gowthaman

Reputation: 1282

This is what the following directive does when added to the input element.

  1. It appends a span element "Show me" with ng-click=show() event attached to it.
  2. scope: true enables an isolated scope for the directive. This makes sure the function show() is unique for each directive.
  3. When clicked on "Show me", the directive changes the input type of that element.

Hope this helps.

JSfiddle link

Upvotes: 2

Related Questions