如何解决Angularjs:在保留 ng-model 的指令中克隆输入元素
大家好,我的问题可能很愚蠢,但我已经挣扎了几个小时才能完成某件事。
所以简而言之,当应用于表单中的实际输入时,我创建了一个 show-hide-password 指令,克隆初始元素,在它周围创建一个 div 包装器,然后将克隆的一个应用到包装器。现在,如果我这样做,我将丢失原始元素上的 ng-model。
问题:我如何从原始元素中保留 ng-model 并完全按照它应该的方式运行?!
指令代码如下:
app.directive('showHidePwd',function ($compile) {
return {
require: 'ngModel',restrict: 'A',// scope: true,link: function (scope,element) {
const mode = {
show: 'fa fa-eye fa-fw',hide: 'fa fa-eye-slash fa-fw'
};
let toggle = false;
scope.cloned = element.clone(true,true);
scope.cue = mode.show;
scope.toggle = () => {
const nextType = scope.cloned.attr('type') === 'password' ? 'text' : 'password';
toggle = !toggle;
scope.cue = toggle ? mode.hide : mode.show;
scope.cloned.attr('type',nextType);
}
scope.content = $compile(
`
<div style="position:relative;">
<a href="javascript:;"
ng-click="toggle()"
class="show-hide-pwd">
<i class="{{cue}}"></i>
</a>
</div>
`
)(scope);
scope.content.prepend(scope.cloned);
element
.parent()
.before(
scope.content
).remove();
}
};
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。