切换表单中字段的编辑和显示答案

【问题标题】：Toggle edit and display of the fields in a form切换表单中字段的编辑和显示
【发布时间】：2023-03-18 19:38:01
【问题描述】：

首先，我在here 有 plnkr。

我正在尝试创建一系列指令，以支持在表单中就地切换文本显示和编辑。据我了解，有一个类似的模块，如xeditable 可用，但我们需要做一些不同的事情。所以我从一个实验开始，从类似的东西开始。

首先，我创建了一个允许切换编辑/显示的指令，方法是在名为editableForm 的指令上设置属性editEnabled。以下代码除了一行日志消息之外没有做任何特殊的事情。

function editableForm ($log) {

        var directive = {
            link: link,
            require: ['form'],
            restrict: 'A',
            scope: {
                editEnabled: "&editEnabled"
            }
        };
        return directive;

        function link(scope, element, attrs, controller) {


             //$log.info('editEnabled: ' + scope.editEnabled());
            $log.info('editEnabled: ' + attrs.editEnabled); //this also works


        }
    } //editableForm

然后我写了以下指令来覆盖html中的input标签：

 //input directive
    function input($log) {

        var directive = {
            link: link,
            priority: -1000,
            require: ['^?editableForm', '?ngModel'],
            restrict: 'E'
        };
        return directive;

        function link(scope, element, attrs, ngModel) {

            ngModel.$render = function() {
                        if (!ngModel.$viewValue || !ngModel.$viewValue) {
                            return;
                        }
                        element.text(ngModel.$viewValue);
                    };
                $log.info('hello from input');
                $log.info('input ngModel: ' + attrs.ngModel);
                // element.val('Hello');

            scope.$apply(function() {
                            ngModel.$setViewValue('hello');
                            ngModel.$render();
                        });


        }
    } //input

我试图在input 指令中将输入的ngModel 值显示为文本，但是，在我的测试中它似乎没有做任何事情。有人可以发现我做错了什么吗？我希望用 text/html 替换每个输入字段（例如，<span>JohnDoe</span> 代表用户名）。

我对输入的第一次尝试是概念验证。如果可行，我将继续处理其他标签，如button、select 等。

【问题讨论】：

标签： angularjs forms input directive

【解决方案1】：

在这里远射...您在input 指令中同时要求editableForm 和ngModel。所以你的链接函数的第四个参数应该是一个控制器数组，按照require数组的顺序排列，而不是你期望的ngModel控制器。

我没有进一步检查您的代码，但请检查一下。

【讨论】：