Question

最重要的是，我有here处的plnkr。

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

首先，我创建了一个指令，允许通过在名为editEnabled的指令上设置属性editableForm来切换编辑/显示。除了一行日志消息之外，以下代码不会做任何特殊操作。

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

我试图在ngModel指令中将输入的input值显示为文本，但是，在我的测试中似乎没有做任何事情。有人能找到我做错的地方吗？我希望用text / html替换每个输入字段（例如，用户名为<span>JohnDoe</span>。

我对输入的第一次尝试是一个概念证明。如果有效，我会继续处理其他代码，例如button，select等。

Answer 1

在这里做远景......你的editableForm指令要求ngModel和input。因此，链接函数的第四个参数应该是require数组的相应顺序的控制器数组，而不是您期望的ngModel控制器。

我没有进一步检查你的代码，但检查出来。

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

1 个答案: