Write a custom "editable" directive with angularjs

Question

I'm studying angularjs, and I want to write a custom "editable" directive, which can make a normal html element "editable":

When user clicks it, it will show a text input or textarea to let user edit the content, and there is also a "update" and "cancel" button besides. User can click the "update" button or press "Ctrl+enter" to submit the modified content, or click "cancel" or press "escape" to cancel the modification.

The "editable" signature looks like:

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

I've create a live demo here: http://jsfiddle.net/Freewind/KRduz/, you can just update it.

bsr · Accepted Answer · 2012-06-24 12:05:50Z

14

I am new to Angular myself, and hope you would get the a working example with your fiddle. Meanwhile, John Lindquist has an excellent video where he explains how to create a markdown tag to embed an editor. Which has details on how to make an editable and preview regions with angular directives.

answered Jun 24, 2012 at 12:05

bsr

59k88 gold badges220 silver badges322 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zhon Over a year ago

While the videos are great, I would like to see a summary here.

Ryan Shea · Accepted Answer · 2013-09-12 18:45:12Z

First I'd watch the John Lindquist angularjs videos that bsr posted - they are very good. Then, I'd check out the directive I threw together below.

.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();
                        });
                    }
                });
            }
        }
    }
})

This is exactly how it should be done IMO. Here's all you need to do to include an editable:

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

Good to go.

vitalets · Accepted Answer · 2013-09-19 08:53:48Z

7

Please have a look on angular-xeditable: http://vitalets.github.io/angular-xeditable

answered Sep 19, 2013 at 8:53

vitalets

5,1732 gold badges38 silver badges38 bronze badges

Comments

Oliver · Accepted Answer · 2012-06-24 12:17:01Z

4

I started by making an example which works. I guess it should not be too much work to turn it into a directive with all the options you want.

My thought is - don't try to do too much in one directive, perhaps it can be achieved with quite a few smaller directives.

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

answered Jun 24, 2012 at 12:17

Oliver

2,4002 gold badges18 silver badges12 bronze badges

Comments

Mohamed Saad · Accepted Answer · 2020-02-16 10:44:02Z

0

use e-addYourDirectiveName

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

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

answered Feb 16, 2020 at 10:44

Mohamed Saad

12 bronze badges

1 Comment

colidyre Over a year ago

This provided snippet is hard to repair. Can you please edit the answer?

Collectives™ on Stack Overflow

Write a custom "editable" directive with angularjs

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related