Question

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

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

“可编辑”签名如下所示：

<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/，你可以更新它。

Answer 1

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

Answer 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>

很高兴。

Answer 3

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

Answer 4

我开始做一个有效的例子。我想将它变成一个带有你想要的所有选项的指令应该不会太多工作。

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

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

Answer 5

使用e-addYourDirectiveName

 <span editable-text="university.ValueAr" e-only-arabic-letters-input e-name="ValueAr" e-form="UniversityForm">  </span>

字母输入电子名称=“ ValueAr”电子表单=“ UniversityForm” onbeforesave =“ checkValue（$ data）”> {{university.ValueAr}}

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

5 个答案: