angularjs中`<input />`元素的ng-type / show-password指令

Question

我们可以对输入元素使用数据绑定，如下所示：

<input type="{{ showPassword ? 'text' : 'password' }}" name="password">

但是这与在href属性（see ngHref）上使用数据绑定有类似的问题。这样，dom中的输入元素具有类型{{ showPassword ? 'text' : 'password' }}，直到角度加载。使ngType指令看起来很方便ngHref，可以这样使用：

<input type="password" ng-type="{{ showPassword ? 'text' : 'password' }}" name="password">

还有其他办法吗？我是否必须实施此ngType事项？

Answer 1

更改<input>类型的自定义指令：

要显示或隐藏密码，请使用custom directive：

app.directive("showPassword", function() { 
    return function linkFn(scope, elem, attrs) {
        scope.$watch(attrs.showPassword, function(newValue) {
            if (newValue) {
                elem.attr("type", "text");
            } else {
                elem.attr("type", "password");
            };
        });
    };
});

用法

 <input type=password show-password="showPassword" 
        ng-model="thePassword">

show-password指令监视已定义的范围变量，并在输入时将输入更改为type=text，并在返回时将输出更改为type=password。

The DEMO

＆＃13;

＆＃13;

angular.module("myApp",[])
.directive("showPassword", function() { 
    return function linkFn(scope, elem, attrs) {
        scope.$watch(attrs.showPassword, function(newValue) {
            if (newValue) {
                elem.attr("type", "text");
            } else {
                elem.attr("type", "password");
            };
        });
    };
})

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app='myApp'>

    <button ng-click="showPassword = true">Show Password</button><br>
    <button ng-click="showPassword = false">Hide Password</button><br>
    
    <input type=password show-password="showPassword" 
           ng-model="thePassword">
    <hr>
    PASSWORD == {{thePassword}}
</div>

＆＃13;

＆＃13;

＆＃13;