Angular nicht ändert, nachdem Textbereich Dateieingabe

Question

zu beginnen, ich bin ein totaler Anfänger in Bezug auf Angular machen. Es ist einfach so passiert, dass ich begonnen, ein Projekt zu starten mit JHipster die Verwendung von Angular macht.

Meine Situation ist wie folgt:

ich einen Textbereich haben, wo ein Benutzer in einem Text schreiben können. Nachdem der Benutzer eines Unter den Änderungen in dem Textfeld am Ende der Seite einreichen drückt gerettet werden. Das allein funktioniert gut.

Ich habe versucht, die Funktionalität meiner Maske zu erhöhen, indem Sie eine input type = file hinzufügen, in der der Benutzer eine TXT-Datei seiner Wahl hochladen kann. Der Text wird dann in das Textfeld geschrieben, ich diese Javascript verwenden, um die Dinge passieren:

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

diese Methode funktioniert wie erwartet und der Text vom Benutzer ausgewählten Datei wird whitin das Textfeld geschrieben.

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

Das Problem:

Es scheint, dass Angular erkennt keine Änderungen von meinem programmatisch eingefügten Text. Das bedeutet, dass mein Textfeld bleibt ng-pristine, ng-unangetastet usw. Welche weitere bedeutet, dass die Taste nicht meine Änderungen nicht einreichen schlagen speichern als Angular nur knapp sein Ziel, sie aus dem erzeugten Text erfassen. Wenn ich den Text durch meinen Input schreiben und zusätzlich tun, um eine Benutzereingabe, wie ein einfaches, durch Leerzeichen, die sparen Mechanismus funktioniert gut.

Wie kann ich feststellen Eckige zu meiner Form zu machen oder meine TextArea- revailidate? Hilfe wird sehr geschätzt! Danke im Voraus.

Answer 1

Da dieser Angular ist, sollten Sie nicht (nie) setzen den Wert des Textfeldes direkt über das DOM api.You sollten dies nicht tun:

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

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

Stattdessen sollten Sie den Wert des entsprechenden aktualisieren ng-Modell-Direktive, in diesem Fall vm.topic.content.

sollten Sie

tun

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

Ich kann nicht sehen, wo Sie die vm.topic Objekt init, weder wenn Sie die VM-Syntax verwenden (im Code, den ich sehen Sie die $ scope Syntax verwenden. mit `$ watch` auf` textarea` ..), in diesem Fall können Sie tun

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

Hoffe, es hilft