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