angularjsのディレクティブからモデルを更新する

Question

ドラッグアンドドロップの指示があります。

ドラッグアンドドロップはうまく機能しますが、モデルの更新に問題があります。 一部のテキストをテキストエリアにドロップした後、テキストは正常に表示されていますが、モデルは更新されていません。

私はここで何が欠けていますか？

//マークアップ

<textarea drop-on-me id="editor-texto" ng-trim="false" ng-model="mymodel" 
name="templateSms.template">test.</textarea> 

//ディレクティブ

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; 
} 

Answer 1

typeInTextarea関数内でごtextareaモデルを更新し、$apply実行全体のアプリ間でモデルチェンジを更新するサイクルをダイジェストを使用しました。リンク機能のみを持つ指令の現在の構造では、スコープを（パラメータとして）typeInTextarea関数に渡す必要があります。 だからあなたの関数は次のようになります。

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(); 
} 

とdropOnMe機能は次のようになります。

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; 
} 

この例をチェックしてください（私はあなたがそう例えば、私がスパンと考えてきたドラッグしていた要素がわかりません要素&そのためだけに使用されるinnerHTMLプロパティ）：

https://plnkr.co/edit/wGCNOfOhoopeZEM2WMd1?p=preview