angular.js - angularjs realizes double-clicking the span tag and turning the span tag into an input tag?

Question

There are multiple span tags on the page, and each span tag is bound to a double-click event. How to implement it in the double-click event to change the span tag that is double-clicked into an input tag, and at the same time, the value in the span tag becomes that of the input tag. value?

迷茫 · Answer

1. It’s easy to do with the help of html5的新特性contenteditable and Angular’s instructions.
2. You can watch this demo
3. The specific code is as follows:
app.js

    (function(){
    angular.module('MyApp', [])
        .controller('MyController', MyController)
        .directive('contentEditable', contentEditable);

    MyController.$inject = [];
    contentEditable.$inject = [];

    function MyController(){
        var vm = this;
        vm.test = 'Hello World!';
    }
    function contentEditable(){
        return {
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                element.html(scope.vm.test);
                attrs.$set('contenteditable', false);

                ctrl.render = function (value) {
                    element.html(value);
                };

                ctrl.$setViewValue(element.html());

                element.bind('dblclick', function () {
                    if (!attrs.contenteditable) {
                        attrs.$set('contenteditable', true);
                        element[0].focus();
                    }
                });

                element.bind('blur', function () {
                    attrs.$set('contenteditable', false);

                    scope.$apply(function () {
                        ctrl.$setViewValue(element.html());
                    });
                });

                element.bind('keydown', function (event) {
                    var esc_key = event.which === 27,
                        enter_key = event.which === 13;

                    if (esc_key || enter_key) {
                        event.preventDefault();
                        element[0].blur();
                    }
                });
            }
        };
    }
})();

index.html

PHP中文网 · Answer

ng-dbclick quality can be processed

習慣沉默 · Answer

Generally speaking, write two, one to hide and one to show:

高洛峰 · Answer

Although it is not good to change the requirements casually...but I guess what you want is actually that the input before double-clicking is read-only and has no borders. After double-clicking, it changes from read-only to editable with borders...
Like before Add double-click response as several people said, and change readonly and style in the callback function.