Angularjs 通过单击复选框使用指令更改输入类型

我的主要目标是通过点击复选框将密码的输入类型更改为文本

理解DOM操作应该在指令中和阅读之后完成

我的指令如下（所有代码都包含在

然而，我并没有真正做到这一点。有什么建议吗？我在用一种有角度的方式来计算

---

谢谢

首先，

element.html

是一个方法而不是属性，因此您正在覆盖

范围内的函数。$watch

回调。其次，每个人（你自己、Angular和浏览器）都可以更轻松地更改输入类型：

编辑：如果您真的需要支持旧版本的IE（以上在9中可用），您可以渲染输入两次，并按如下方式显示/隐藏输入：

---

使用

ng hide

和

ng show

比手动执行要好，对于指令模板可能类似于这样：

<div>
  <input
    required
    type="text"
    name="password"
    class="input password"
    placeholder="Password"
    ng-hide="viewPassword"
    ng-model="user.Password"
  >
  <input
    required
    name="password"
    type="password"
    class="input password"
    placeholder="Password"
    ng-show="viewPassword"
    ng-model="user.Password"
  >
  <input type="checkbox" class="btn btn-mini" ng-click="showPassword()">
</div>

---

工作示例。

如何创建两个输入字段，一个输入类型=文本，第二个输入类型=密码，指向相同的ng型号=user.password”，并使用复选框（showpassword）控制显示哪个输入

<input ng-hide="showpassword" type="password" name="password" class="form-control" placeholder="Password"   ng-model="user.password" />
<input ng-show="showpassword" type="text" name="password" class="form-control" ng-model="user.password" />
<input type="checkbox" ng-model="showpassword" ng-checked="false"> Show Password

显示密码

我刚刚打开了小提琴。变量范围未知（第22行）。您可以先检查一下……更新了！谢谢@didier\u v\u！

function (newValue) {
    var show = newValue ? 2 : 1,
        hide = newValue ? 1 : 2,
        elements = element.find('input');
    elements[hide].style.display = 'none';
    elements[show].style.display = '';
});

<div>
  <input
    required
    type="text"
    name="password"
    class="input password"
    placeholder="Password"
    ng-hide="viewPassword"
    ng-model="user.Password"
  >
  <input
    required
    name="password"
    type="password"
    class="input password"
    placeholder="Password"
    ng-show="viewPassword"
    ng-model="user.Password"
  >
  <input type="checkbox" class="btn btn-mini" ng-click="showPassword()">
</div>

var linker = function(scope, element, attrs){
  scope.viewPassword = true;
  scope.showPassword = function(){
    scope.viewPassword = !scope.viewPassword;
  };
};

<input ng-hide="showpassword" type="password" name="password" class="form-control" placeholder="Password"   ng-model="user.password" />
<input ng-show="showpassword" type="text" name="password" class="form-control" ng-model="user.password" />
<input type="checkbox" ng-model="showpassword" ng-checked="false"> Show Password