angularjs实现双击span标签，将span标签变成input标签

最新推荐文章于 2023-03-29 23:38:55 发布

转载最新推荐文章于 2023-03-29 23:38:55 发布 · 1.7k 阅读

文章标签：

#angular

本文介绍如何使用Angular结合HTML5的contenteditable属性实现可编辑的内容区域，并通过Angular指令进行双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

借助html5的新特性contenteditable和Angular的指令还是很容易做到

<body ng-app="MyApp">
        <div class="test-container" ng-controller="MyController as vm">
            <div class="test" content-editable ng-model="vm.test"></div>
            <hr/>
            <div class="test" ng-bind="vm.test"></div>
        </div>
    </body>

    (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();
                    }
                });
            }
        };
    }
})();