javascript - 避免在 AngularJS 指令的所有实例中更改范围变量

Question

我目前正在学习 AngularJS，想知道是否有人可以帮助我。我有这个指令可以在输入元素之后显示/隐藏特定的图标元素，但是当我将三个输入堆叠在一起时，并且我单击其中一个图标，它们三个都发生了变化。如何将图标/变量的更改限制在单击的特定元素上？

.directive('revealInput', function() {
  return {
    restrict: 'A',
    template: function(element, attrs) {
      let iconEl = angular.element('<md-icon class="show-password-icon" title="{{ showPassword ?  HIDE_PASSWORD : SHOW_PASSWORD | translate }}" ng-click="toggleReveal()">' 
      + '{{showPassword ? "visibility_off" : "visibility"}}'
      + '</md-icon>')

      if (attrs.revealInput) {
        return element[0].after(iconEl[0]);
      }
    },
    link: function(scope, element, attrs) {
      scope.showPassword = false;
      // This is to toggle the input element's type attribute depending on showPassword's value. 
      scope.toggleReveal = function () {
        scope.showPassword = !scope.showPassword;
        element[0].setAttribute('type', scope.showPassword ? 'text' : 'password')
        element[0].focus();
      }
    },
  }
});  

HTML 代码：

<input type="password" ng-attr-reveal-input="revealInputEnabled" />