angular.js - angularjs menyedari mengklik dua kali teg span dan menukar teg span menjadi teg input?

Question

Terdapat berbilang teg rentang pada halaman dan setiap teg rentang terikat pada acara klik dua kali Cara melaksanakannya dalam acara klik dua kali untuk menukar teg rentang yang diklik dua kali menjadi teg input dan pada masa yang sama, nilai dalam teg span menjadi nilai teg input?

迷茫 · Answer

1. Mudah untuk melakukannya dengan bantuan html5 ciri baharu contenteditable dan arahan Angular.
2. Anda boleh menonton demo ini
3. Kod khusus adalah seperti berikut:
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

Hanya mengendalikannya dalam kualiti ng-dbclick

習慣沉默 · Answer

Secara umumnya, tulis dua, satu untuk disembunyikan dan satu untuk ditunjukkan:

高洛峰 · Answer

Walaupun tidak baik untuk menukar keperluan secara santai... tetapi saya rasa apa yang anda mahu sebenarnya adalah input sebelum klik dua kali adalah baca sahaja dan tidak mempunyai sempadan Selepas klik dua kali, ia berubah daripada baca-. hanya boleh diedit dengan sempadan...
Tambahkan respons klik dua kali seperti yang dikatakan sebelumnya, dan tukar baca sahaja dan gaya dalam fungsi panggil balik.