<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module(‘myApp‘, []).directive(‘contenteditable‘, function () { return { require: ‘ngModel‘, link: function (scope, elm, attrs, ctrl) { // view -> model elm.bind(‘blur‘, function () { scope.$apply(function () { ctrl.$setViewValue(elm.html()); }); }); // model -> view ctrl.$render = function (value) { elm.html(value); }; // load init value from DOM ctrl.$setViewValue(elm.html()); } }; }); </script> </head> <body> <div contenteditable="true" ng-model="content" title="Click to edit">Some</div> <pre>model = {{content}}</pre> <style type="text/css"> div[contentEditable] { cursor: pointer; background-color: #D0D0D0; } </style> </body> </html>
时间: 2024-10-10 15:28:38