在文件輸入

Question

開始之後，角度不會渲染Textarea更改，我是一個關於Angular的初學者。它恰好發生了，我開始使用JHipster來啓動一個使用Angular的項目。

我的情況是這樣的：

我有一個文本，其中用戶可以在一些文字書寫。在用戶按下頁面末尾的提交底部後，textarea中的更改被保存。這本身工作正常。

我試圖通過添加一個input type = file來增加我的面具的功能，其中用戶可以上傳他選擇的.txt文件。該文本被然後寫入textarea的，我用這個JavaScript來使事情發生：

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

這種方法確實如預期，並從用戶選擇的文件中的文本寫入whitin文本字段。

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

問題：

看來，該角不檢測從我的編程方式插入的文本進行任何更改。也就是說，我的文本框仍然是ng-pristine，ng-untouched等。更進一步的意思是，點擊submit按鈕並不會保存我的更改，因爲Angular沒有從生成的文本中檢測到它們。如果我通過輸入寫入文本並另外執行用戶輸入（例如簡單的空格），那麼保存機制工作得很好。

如何告訴Angular呈現我的表單或重新使用我的textarea？非常感謝幫助！提前致謝。

Answer 1

由於這是角度，你不應該永遠無法把文本框的值直接通過DOM api.You應該這樣做：

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

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

相反，你應該更新對應的值ng-model指令，在這種情況下，vm.topic.content。

你應該做

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

我不能看到你的初始化對象vm.topic，無論是如果你使用的是虛擬機的語法（在我看你使用的是$範圍語法的代碼。 ..），在這種情況下，你可以做

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

希望它有助於