Updating model from directive in angularjs -
i have directive drag , drop.
the drag , drop works well, have problem updating model. after drop text textarea, text showing ok, model not updating.
what missing here?
//markup
<textarea drop-on-me id="editor-texto" ng-trim="false" ng-model="mymodel" name="templatesms.template">test.</textarea> //directive
angular .module('clinang') .directive('dragme', dragme) .directive('droponme', droponme); dragme.$inject = []; function typeintextarea(el, newtext) { var start = el.selectionstart var end = el.selectionend var text = el.value var before = text.substring(0, start) var after = text.substring(end, text.length) el.value = (before + newtext + after) el.selectionstart = el.selectionend = start + newtext.length el.focus() } function dragme() { var ddo = { restrict: 'a', link: function(scope, element, attrs) { element.prop('draggable', true); element.on('dragstart', function(event) { event.datatransfer.setdata('text', event.target.id) }); } }; return ddo; } droponme.$inject = []; function droponme() { var ddo = { restrict: 'a', link: function(scope, element, attrs) { element.on('dragover', function(event) { event.preventdefault(); }); element.on('drop', function(event) { event.preventdefault(); var data = event.datatransfer.getdata("text"); var x=document.getelementbyid(data); typeintextarea(event.target,x.getattribute('data-value')) }); } }; return ddo; }
update textarea model inside typeintextarea function , using $apply run digest cycle update model change across whole app. current structure of directives link functions you'll need pass scope typeintextarea function (as parameter). function be:
function typeintextarea(scope, el, newtext) { var start = el.selectionstart var end = el.selectionend var text = el.value var before = text.substring(0, start) var after = text.substring(end, text.length) el.value = (before + newtext + after); scope.mymodel.textnote = el.value; el.selectionstart = el.selectionend = start + newtext.length; el.focus(); } and droponme function be:
function droponme() { var ddo = { restrict: 'a', link: function(scope, element, attrs) { element.on('dragover', function(event) { event.preventdefault(); }); element.on('drop', function(event) { event.preventdefault(); var data = event.datatransfer.getdata("text"); var x=document.getelementbyid(data); typeintextarea(scope, event.target,x.getattribute('data-value')) scope.$apply(); }); } }; return ddo; } check out example (i don't know element you're dragging e.g. i've considered span element & used innerhtml ):
Comments
Post a Comment