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 (将#修改为@）