angular.js - angularjs实现双击span标签，将span标签变成input标签？

Question

页面中有多个span标签，每个span标签都绑定了一个双击事件，如何在双击事件中实现，将被双颊的span标签变成input标签，同时span标签中的值变成input标签的value？

迷茫 · Answer

1. C'est facile de le faire avec l'aide des nouvelles fonctionnalités de html5 contenteditable et des instructions d'Angular.
2. Vous pouvez regarder cette démo
3 Le code spécifique est le suivant :
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

Gérez-le simplement avec la qualité de ng-dbclick

習慣沉默 · Answer

De manière générale, écrivez-en deux, un pour cacher et un pour montrer :

高洛峰 · Answer

Bien qu'il ne soit pas bon de modifier les exigences avec désinvolture... mais je suppose que ce que vous voulez, c'est en fait que l'entrée avant le double-clic soit en lecture seule et n'ait pas de bordures. Après le double-clic, elle change de lecture. uniquement modifiable avec des bordures...
Ajoutez une réponse en double-clic comme les précédents l'ont dit, et modifiez la lecture seule et le style dans la fonction de rappel.