While testing I noticed some unexpected behavior. The issue was when editing more then one row after enter was hited. So I changed the .html to .text method. Now it works fine.
http://plnkr.co/edit/rEcFmoAU0lxIed2K6Dpj?p=preview <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>contentEditable add prefix</title> <style type="text/css"> div[contentEditable] { background-color: #D0D0D0; } </style> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script> </head> <body ng-app="form-example2"> <div contentEditable="true" ng-model="content" title="Click to edit"></div> <p>{{content}}</p> <script> console.clear(); (function(angular) { 'use strict'; angular.module('form-example2', []).directive('contenteditable', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { elm.on('input', function() { scope.$apply(function() { ctrl.$setViewValue(elm.text()); }); }); elm.on('blur', function() { if (ctrl.$viewValue&&ctrl.$viewValue.indexOf('✔ ') == -1) elm.text('✔ ' + ctrl.$viewValue); scope.mouseout2 = function () { if (ctrl.$viewValue&&ctrl.$viewValue.indexOf('✔ ') == -1) elm.text('✔ ' + ctrl.$viewValue); } }); elm.on('focus mouseover', function() { if (ctrl.$viewValue) elm.text(ctrl.$viewValue.replace('✔ ', '')); }); elm.on('focus', function() { scope.mouseout2 = function () { console.log('no action of mouseout'); } }); elm.on('mouseout', function () {if(ctrl.$viewValue&&ctrl)scope.mouseout2()}); } }; }); })(window.angular); </script> </body> </html> W dniu niedziela, 1 marca 2015 14:12:37 UTC+1 użytkownik trzczy napisał: > > Hi Sander, > > so I have done some changes to the code. What I need to get is a field > that an user can fill. It should be contenteditable div to resize itself > automatically. The prefix should be added automatically. The data should be > stored to the main scope and then to mongodb. The prefix is not to be > stored. So my directive is too complex. How to improve it? Beneath there is > the most recent version. > > Regards > > http://plnkr.co/edit/szJeUML7oPrETcumgDHA?p=preview > > <!doctype html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <title>contentEditable add prefix</title> > <style type="text/css"> > div[contentEditable] { > cursor: pointer; > background-color: #D0D0D0; > } > </style> > <script src="// > ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js > "></script> > </head> > > <body ng-app="form-example2"> > <div contentEditable="true" ng-model="content" title="Click to > edit"></div> > <p>{{content}}</p> > <script> > console.clear(); > (function(angular) { > 'use strict'; > angular.module('form-example2', []).directive('contenteditable', > function() { > return { > require: 'ngModel', > link: function(scope, elm, attrs, ctrl) { > // view -> model > elm.on('input', function() { > scope.$apply(function() { > ctrl.$setViewValue(elm.html()); > }); > }); > elm.on('blur', function() { > if (ctrl.$viewValue && ctrl.$viewValue.indexOf('✔ ') == -1) > elm.html('✔ ' + ctrl.$viewValue); > elm[0].style.cursor = "pointer"; > }); > elm.on('focus mouseover keydown', function() { > if (ctrl.$viewValue) > elm.html(ctrl.$viewValue.replace('✔ ', '')); > }); > elm.on('blur', function() { > scope.mouseout2 = function() { > if (ctrl.$viewValue && ctrl.$viewValue.indexOf('✔ ') == -1) > elm.html('✔ ' + ctrl.$viewValue); > } > }); > elm.on('focus', function() { > elm[0].style.cursor = "text"; > scope.mouseout2 = function() { > console.log('no action of mouseout'); > } > }); > elm.on('mouseout', function() { > if (ctrl.$viewValue && ctrl) scope.mouseout2() > }); > } > }; > }); > })(window.angular); > </script> > </body> > > </html> > > > > > W dniu piątek, 27 lutego 2015 05:54:26 UTC+1 użytkownik Sander Elias > napisał: >> >> Hi Trzczy, >> >> Hmm, well, it might do what you expect. It is more angular then your >> previous version. >> Add this line to your template: ` <pre>{{content}}</pre>`, and do some >> editing, and then some mouse movements over the element.I suspect it will >> not do what you expect. >> I can't figure out what you are trying to do? do you want to prefix it >> visually (only for the view, don't modify the data), or do you want to >> prefix the data itself? >> Both is possible, and neither one will need a directive as complex as >> what you have written. Or a directive at all. >> >> Regards >> Sander >> >> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
