javascript - 为什么使用 javascript 编辑输入文本不更新 angularJs 变量？

Question

我想加载一个文本文件，并通过将文件复制到输入文本来将该文件的文本放入 AngularJS 变量中。

这个js将文本放在输入字段上:

document.getElementById('JSONFile').addEventListener('change', readFile, false);

function readFile(evt) {
    var files = evt.target.files;
    var file = files[0];
    var reader = new FileReader();

    var input = document.getElementById('jsontext');

    reader.readAsText(file);
    reader.onload = function () {
        input.value = this.result;
    };
}

输入字段绑定(bind)到 AngularJS 变量:

<input type="text" ng-model="jsontext" id="jsontext" />

但是只有当我手动更改文本输入上的某些内容时，变量才会更新，以进行测试:

http://jsfiddle.net/uuuW6/

Answer 1

我不知道您通过 input_fiddle 指的是什么，但我看到您只是试图将更改处理程序绑定(bind)到某些输入。它不起作用的原因是在 AngularJS 中，数据更改由 digest loop 处理。通过 watches .

要在不受范围限制的上下文中更改数据，您可以调用 $apply 来激活摘要循环(或使用 apply 函数包装该代码)，或者仅使用经典的 Angular 方式，并通过指令绑定(bind)更改处理程序，例如:

$scope.$apply(function () {
    input.value = this.result;
});

进一步阅读

• $watch How the $apply Runs a $digest 关于 Angular 提示