javascript - ng-model 更新在输入类型文件的 UI 中不可见

Question

我正在尝试一个非常简单的例子。我有一个文件字段和文本字段。选择文件后，需要在文本框中更新其值。

我的代码如下所示

<input id="selectedFiles" type="text" ng-model="selectedFiles" placeholder="No file(s) chosen">

<input id="file" type="file" name="file" multiple  onchange="angular.element(this).scope().fileChange()">

我知道 ng-change 不适用于输入类型的文件，所以我使用了上面的 onchange 方法

在 javascript 方面，我的代码看起来像

$scope.selectedFiles = "";
$scope.fileChange = function () {
    file = document.getElementById("file");
    $scope.selectedFiles = file.value;
}

我正在更新 onchange 中的值模型值，但在 UI 中它没有反射(reflect)，尽管输入是通过 slectedFiles 变量绑定(bind)的。

JSFIDDLE LINK

我应该怎么做才能使值反射(reflect)在 UI 中？

Answer 1

您必须通过调用 $scope.$apply 来包装您的 fileChange 函数体。否则 Angular 将不会测试模型是否已更改。

$scope.selectedFiles = "";
$scope.fileChange = function () {
    $scope.$apply(function() {
        file = document.getElementById("file");
        $scope.selectedFiles = file.value;
    });
}