问题描述
页面中有多个span标签，每个span标签都绑定了一个双击事件，如何在双击事件中实现，将被双颊的span标签变成input标签，同时span标签中的值变成input标签的value？
问题解答
回答1：1.借助html5的新特性contenteditable和Angular的指令还是很容易做到的。2.可以看这个demo3.具体代码如下：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
<body ng-app='MyApp'><p ng-controller='MyController as vm'> <p content-editable ng-model='vm.test'></p> <hr/> <p ng-bind='vm.test'></p></p> </body>回答2：
ng-dbclick质量里面去处理就可以了
回答3：一般来说都是写两个，一个隐藏一个显示就好：
<span ng-show='!tag.edit' ng-dblclick='tag.edit = true' ng-bing='tag.name'></span><input type='text' ng-show='tag.edit' ng-model='tag.name' />回答4：
虽然随便更改需求是不好的……但是我猜你想要的其实只是双击之前的input只读且无边框，双击之后它从只读变成可编辑、并带上边框……像前面几位说的那样加双击响应，并在回调函数中改readonly和style吧。
