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

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

score 14 · Accepted Answer

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

score 7 · Accepted Answer

首先，我会观看 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();
                        });
                    }
                });
            }
        }
    }
})

这正是国际海事组织应该这样做的方式。这是包含可编辑项所需的全部操作：

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

很好走。

score 7 · Accepted Answer

7

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

于 2013-09-19T08:53:48.010 回答

score 4 · Accepted Answer

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

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

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

score 0 · Accepted Answer

使用 e-addYourDirectiveName

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

字母输入 e-name="ValueAr" e-form="UniversityForm" onbeforesave="checkValue($data)"> {{ university.ValueAr }}

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

5 回答 5

Related

Reference