Question

首先，我是Angular的初学者。事实就是这样，我开始使用JHipster启动一个项目，该项目使用了Angular。

我的情况如下：

我有一个textarea，用户可以在其中写一些文字。用户按下页面末尾的提交底部后，将保存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");
            }
        }
    }

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

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

如何告诉Angular呈现我的表单或使我的textarea复活？非常感谢帮助！提前谢谢。

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.topic对象，如果你正在使用VM语法（在代码中我看到你正在使用$ scope语法......），那么你可以做< / p>

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

希望它有助于

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

1 个答案: