angular.js - angularjs實作雙擊span標籤，將span標籤變成input標籤？

Question

頁面中有多個span標籤，每個span標籤都綁定了一個雙擊事件，如何在雙擊事件中實現，將被雙頰的span標籤變成input標籤，同時span標籤中的值變成input標籤的value？

迷茫 · Answer

1.借助html5的新特性contenteditable和Angular的指令還是很容易做到的。
2.可以看這個demo
3.具體程式碼如下：
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品質裡面去處理就可以了

習慣沉默 · Answer

一般來說都是寫兩個，一個隱藏一個顯示就好：

高洛峰 · Answer

雖然隨便更改需求是不好的……但是我猜你想要的其實只是雙擊之前的input只讀且無邊框，雙擊之後它從只讀變成可編輯、並帶上邊框……
像前面幾位說的那樣加雙擊響應，並在回呼函數中改readonly和style吧。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學