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

来源：互联网发布：知所然又知其所以然编辑：程序博客网时间：2024/05/29 04:22

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

阅读全文

0 0