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.
