使用 angularjs 编写自定义“可编辑”指令答案

【问题标题】：Write a custom "editable" directive with angularjs使用 angularjs 编写自定义“可编辑”指令
【发布时间】：2020-02-16 18:44:02
【问题描述】：

我在学习angularjs，想写一个自定义的“可编辑”指令，可以让普通的html元素“可编辑”：

当用户点击它时，它会显示一个文本输入或文本区域让用户编辑内容，此外还有一个“更新”和“取消”按钮。用户可以点击“更新”按钮或按“Ctrl+enter”提交修改的内容，或点击“取消”或按“escape”取消修改。

“可编辑”签名看起来像：

<div editable 
     e-trigger="click|dblclick"       /* use click or dblclick to trigger the action */
     e-update-url="http://xxx/xxx"    /* when submitting, the data will PUT to this url */
     e-singleline="true|false"        /* if ture, use text input, otherwise textarea */
     ng-model="name">                 /* the corresponding model name */
{{name}}
</div>

我在这里创建了一个现场演示：http://jsfiddle.net/Freewind/KRduz/，你可以更新它。

【问题讨论】：

标签： angularjs

【解决方案1】：

我自己是 Angular 的新手，希望你能用你的小提琴得到一个可行的例子。同时，John Lindquist 有一个很棒的视频，他解释了如何创建一个 markdown 标签来嵌入一个编辑器。其中详细介绍了如何使用角度指令制作可编辑和预览区域。

【讨论】：

虽然视频很棒，但我想在这里看到一个摘要。

【解决方案2】：

首先，我会观看 bsr 发布的 John Lindquist angularjs 视频 - 它们非常好。然后，我将查看我在下面汇总的指令。

.directive('editable', function() {
    var editTemplate = '<input type="text" ng-model="inputValue" \
        ng-show="inEditMode" ng-dblclick="switchToViewMode()" \
        class="form-control input-sm">';
    var viewTemplate = '<div ng-hide="inEditMode" \
        ng-dblclick="switchToEditMode()">{{ value }}</div>';
    return {
        restrict: 'E',
        scope: {
            value: '=ngModel',
            bindAttr: '='
        },
        controller: function($scope) {
            $scope.inputValue = $scope.value;
        },
        replace: true,
        compile: function(tElement, tAttrs, transclude) {
            tElement.html(editTemplate);
            tElement.append(viewTemplate);

            return function(scope, element, attrs) {
                scope.inEditMode = false;

                scope.switchToViewMode = function() {
                    scope.inEditMode = false;
                    scope.value = scope.inputValue;
                }
                scope.switchToEditMode = function() {
                    scope.inEditMode = true;
                }
                scope.toggleMode = function() {
                    scope.inEditMode = !scope.inEditMode;
                }

                element.bind("keydown keypress", function(event) {
                    if (event.keyCode === 13) {
                        scope.$apply(function() {
                            scope.switchToViewMode();
                        });
                    }
                });
            }
        }
    }
})

这正是 IMO 应该这样做的方式。以下是包含可编辑项所需的全部操作：

<editable ng-model="name"></editable>

很好。

【讨论】：

【解决方案3】：

请查看 angular-xeditable： http://vitalets.github.io/angular-xeditable

【讨论】：

【解决方案4】：

我首先制作了一个可行的示例。我想把它变成一个包含你想要的所有选项的指令应该不会太多工作。

我的想法是 - 不要试图在一个指令中做太多，也许可以通过相当多的较小指令来实现。

http://jsfiddle.net/Saulzar/rueHv/

【讨论】：

【解决方案5】：

使用 e-addYourDirectiveName

 &lt;span editable-text="university.ValueAr" e-only-arabic-letters-input e-name="ValueAr" e-form="UniversityForm"&gt;  &lt;/span&gt;

letters-input e-name="ValueAr" e-form="UniversityForm" onbeforesave="checkValue($data)"> {{ 大学.ValueAr }}

【讨论】：

这个提供的 sn-p 很难修复。可以请edit回答吗？