AngularJs-使用指令在单击事件时显示隐藏密码

我有一个密码输入字段和一个带有该输入字段的按钮 现在，若输入字段的类型是passwordi.e type=password，那个么点击那个按钮它就会变成text，即type=text 如果再次单击同一按钮，则应更改type=password

意味着它应该切换输入元素类型的值

我已经使用控制器完成了这项工作，它与控制器配合得很好。下面是使用控制器的工作代码

但如果我想使用指令，那么如何使用指令处理这个切换条件，而不是控制器

用途-我想在多个输入元素上使用此功能

HTML

我尝试使用指令-下面是我的试用代码 我不知道如何使用指令更改元素的类型

.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" />

指示

HTML使用指令

---

可以使用ng attr type指令动态更改输入类型。例如：

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

点击按钮时更新

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

---

可以使用ng attr type指令动态更改输入类型。例如：

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

点击按钮时更新

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

---

这是将以下指令添加到输入元素时执行的操作

它附加了一个span元素Show me，并附加了ng click=Show事件。 scope:true为指令启用一个独立的作用域。这确保每个指令的函数show是唯一的。 单击ShowMe时，该指令会更改该元素的输入类型。 希望这有帮助

---

这是将以下指令添加到输入元素时执行的操作

它附加了一个span元素Show me，并附加了ng click=Show事件。 scope:true为指令启用一个独立的作用域。这确保每个指令的函数show是唯一的。 单击ShowMe时，该指令会更改该元素的输入类型。 希望这有帮助

---

你想让别人为你创建一个指令吗？@Tuhin我已经添加了我的试用指令代码-我不知道如何使用directives更改类型没有内置指令。您需要编写一个自定义指令。看看这个。你可能知道你想让别人为你创建一个指令吗？@Tuhin我已经添加了我的试用指令代码-我不知道如何使用指令更改类型没有内置指令。您需要编写一个自定义指令。看看这个。你可能会有一些想法，谢谢，但我有一个疑问-点击事件在哪里？因此，在点击该按钮时，它应该切换密码的条件。我已经更新了切换密码类型状态的答案，或者您可以在任何元素上使用单击事件从控制器切换密码类型。这仅适用于“不打开”按钮。但我想在点击按钮时得到这个条件。喜欢：-而不是复选框，它应该工作在点击按钮，在这种情况下如何实现这一点？谢谢，它的工作很好。默认情况下，为了隐藏密码，我添加了ng init=checkPassword=true，因此默认情况下，它隐藏了我的密码，并且只在单击按钮时才会显示谢谢，但我有一个疑问-单击事件在哪里？因此，在点击该按钮时，它应该切换密码的条件。我已经更新了切换密码类型状态的答案，或者您可以在任何元素上使用单击事件从控制器切换密码类型。这仅适用于“不打开”按钮。但我想在点击按钮时得到这个条件。喜欢：-而不是复选框，它应该工作在点击按钮，在这种情况下如何实现这一点？谢谢，它的工作很好。默认情况下，为了隐藏密码，我添加了ng init=checkPassword=true，所以默认情况下，它隐藏了我的密码，只需单击按钮，它就会显示谢谢，@gilango这一个对我来说很好，但如果我在同一个元素上使用多个指令，那么我在隔离作用域中会出现错误。如果我remove scope=true，那么上面的directive无法正常工作，请您指导我如何处理此场景中的隔离范围，这意味着您的其他指令也具有隔离范围。同一元素中使用的2个指令不能有自己的独立作用域。由于show方法，不确定如何在没有隔离作用域的情况下生成此指令。也许您可以将两个指令合并为一个指令？谢谢，@gilango这一个对我来说很好，但是如果我在同一个元素上使用多个指令，那么对于隔离作用域，我会得到错误。如果我remove scope=true，那么上面的directive无法正常工作，请您指导我如何处理此场景中的隔离范围，这意味着您的其他指令也具有隔离范围。同一元素中使用的2个指令不能有自己的独立作用域。由于show方法，不确定如何在没有隔离作用域的情况下生成此指令。也许可以将两个指令合并为一个指令？

.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" />

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