javascript - 文件输入后 Angular 不会渲染 Textarea 更改

Question

首先，我对 Angular 完全是个初学者。碰巧的是，我开始使用 JHipster 启动一个项目，该项目利用了 Angular。

我的情况如下:

我有一个文本区域，用户可以在其中写入一些文本。用户按下页面末尾的提交按钮后，文本区域中的更改将被保存。这本身就很好用。

我尝试通过添加一个input type = file来增加我的掩码的功能，用户可以在其中上传他选择的.txt文件。然后文本被写入文本区域，我使用这个 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");
            }
        }
    }

此方法按预期执行，并且用户选择的文件中的文本写入文本字段中。

  <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 没有检测到我以编程方式插入的文本的任何更改。这意味着，我的文本字段保持 ng-pristine、ng-untouched 等。这进一步意味着，点击提交按钮不会保存我的更改，因为 Angular 没有从生成的文本中检测到它们。如果我通过输入写入文本并另外进行用户输入(例如简单的空格)，则保存机制可以正常工作。

我如何告诉 Angular 渲染我的表单或重新验证我的文本区域？非常感谢帮助!提前致谢。

Answer 1

由于这是 Angular，您不应该(永远)直接通过 DOM api 放置文本字段的值。您不应该这样做:

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语法(在代码中我看到您正在使用$scope语法...)，我看不到您在哪里初始化vm.topic对象，在这种情况下您可以这样做

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

希望有帮助