角度がオフに開始するために、ファイル入力

Question

後にテキストエリアの変更をレンダリングしていない、私は角に関する合計初心者です。ちょうどそうだった、私はAngularを利用するJHipsterを使ってプロジェクトを開始した。次のように

私の状況は次のとおりです。

私は、ユーザーがいくつかのテキストで書くことができますテキストエリアを持っています。ユーザーがページの最後にサブミットボトムを押すと、テキストエリアの変更が保存されます。それだけでうまく動作します。

私は、ユーザーが自分の好みの.txtファイルをアップロードすることが可能なinput type = fileを追加することによって、私のマスクの機能性を増加させる試みを行いました。テキストはその後、テキストエリアに書き込まれます、私は物事を実現するために、このJavascriptを使用します。期待してユーザーが選択したファイルからテキストをテキストフィールドwhitin書かれているよう

function filechooser(evt) { 
     var files = $('#fileinput').prop('files'); // FileList object 
     var reader = new FileReader(); 

     for (var i = 0, f; f = files[i]; i++) { 
      if (f) { 
       var name = f.name; 
       reader.onload = function (e) { 
        var txtField = $("#field_content"); 
        var txtContents = txtField.val(); 
        var contents = e.target.result; 


        txtField.val(txtContents + "<!--" + name + "-->" + 
         "\n" + "<!--" + "generated from import" + "-->" + 
         "\n" + "<!--" + getFormattedDate() + "-->" + "\n" + "\n" + 
         contents); 
       } 
       reader.readAsText(f); 
       //$scope.editForm.content.$setDirty(); 
       //$scope.ngModel.$render(); 
      } else { 
       alert("Failed to load file"); 
      } 
     } 
    } 

この方法ではありません。

<textarea class="form-control topic" name="content" id="field_content" ng-model="vm.topic.content"></textarea> 
     <!-- filechooser --> 
     <input type="file" id="fileinput"/> 
     <button type="button" id="fileinputSubmit" ng-click="vm.filechooser()"> submit </button> 

問題：

角度が私のプログラムで挿入されたテキストから任意の変更を検出しないこと、らしいです。つまり、私のテキストフィールドは元のままで、元に戻っていないということです。さらに、送信ボタンを押すと変更が保存されません。これは、Angularが生成テキストからそれらを検出しなかったためです。私の入力からテキストを書いて、単純な空白のようなユーザ入力を加えた場合、保存メカニズムはうまく動作します。

は、どのように私は自分のフォームをレンダリングしたり、私のテキストエリアをrevailidateに対する角度伝えることができますか？助けが大いにありがとう！前もって感謝します。

var txtField = $("#field_content"); 
var txtContents = txtField.val(); 

txtField.val(txtContents + "<!--" + name + "-->" + 
        "\n" + "<!--" + "generated from import" + "-->" + 
        "\n" + "<!--" + getFormattedDate() + "-->" + "\n" + "\n" + 
        contents); 

代わりに、あなたは通信員の値を更新する必要があります

Answer 1

これは角張っている、あなたは（決して）べきではないDOM api.You経由で直接テキストフィールドの値を入れて、これを行うべきではありませんng-modelディレクティブ、この場合はvm.topic.contentです。

あなたがvm.topicオブジェクトを初期化場所あなたが

vm.topic.content = txtContents + "<!--" + name + "-->" + 
        "\n" + "<!--" + "generated from import" + "-->" + 
        "\n" + "<!--" + getFormattedDate() + "-->" + "\n" + "\n" + 
        contents 

を行う必要があり、私が見ることができない、どちらもあなたはVMの構文を使用している場合は（コードで私はあなたが$スコープの構文を使用している参照してください。 ...）、その場合には、あなたは

$scope.topic.content = txtContents + "<!--" + name + "-->" + 
        "\n" + "<!--" + "generated from import" + "-->" + 
        "\n" + "<!--" + getFormattedDate() + "-->" + "\n" + "\n" + 
        contents 

を行うことができ、それは