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

如何解决避免在 AngularJS 指令的所有实例中更改范围变量

我目前正在学习 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" />