Javascript 为什么使用<；输入类型="；文件"/>；？_Javascript_Angularjs_Angularjs Scope

Javascript 为什么使用<；输入类型="；文件"/>；？

javascript angularjs

Javascript 为什么使用<；输入类型="；文件"/>；？,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我远不是一个角度方面的专家，所以我必须试着问一个问题。我已经添加了在五月AngularJS项目中上传文件的可能性。在用户提交表单之前，我需要在文本框（或者最好是只读字段）中显示所选文件名。它包含许多需要验证的字段。问题是，所选文件名从未显示。选择文件后，文本块仍然为空。我尝试了以下代码（Plunker:）： index.html： <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <met

我远不是一个角度方面的专家，所以我必须试着问一个问题。我已经添加了在五月AngularJS项目中上传文件的可能性。在用户提交表单之前，我需要在文本框（或者最好是只读字段）中显示所选文件名。它包含许多需要验证的字段。问题是，所选文件名从未显示。选择文件后，文本块仍然为空。我尝试了以下代码（Plunker:）：

index.html：

<!DOCTYPE html>
<html ng-app="myApp">

<head lang="en">
  <meta charset="utf-8" />
  <title>Custom Plunker</title>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>

<body ng-controller="MyCtrl">

  <div class="row">
    <div class="col-md-12">
      <span class="btn btn-default btn-file">
              Välj fil... <input type="file" onchange=" angular.element(this).scope().setFile(this) ">
                                        </span>
      <input type="text" ng-model="organizationSettings.logotypeFileName" />
    </div>
  </div>
</body>

</html>

css:

原因是您使用的是

onchange

，这是angular指令之外的事件

每当您使用angular之外的事件更改范围时，您需要通知需要摘要来更新由该范围管理的视图部分，方法是使用

$apply

最简单的修复方法是使用

ng change

而不是原生

onchange

。所有angulars事件处理指令将在内部触发

$apply

另一种方法（不是最好的方法）是保持onchange并执行以下操作：

$scope.setFile = function(element) {  
    $scope.fileToUpload = element.files[0];
    console.log($scope.fileToUpload.name);
    $scope.organizationSettings.logotypeFileName = $scope.fileToUpload.name;

    $scope.$apply();
};

原因是您使用的是

onchange

，这是angular指令之外的事件

每当您使用angular之外的事件更改范围时，您需要通知需要摘要来更新由该范围管理的视图部分，方法是使用

$apply

最简单的修复方法是使用

ng change

而不是原生

onchange

。所有angulars事件处理指令将在内部触发

$apply

另一种方法（不是最好的方法）是保持onchange并执行以下操作：

$scope.setFile = function(element) {  
    $scope.fileToUpload = element.files[0];
    console.log($scope.fileToUpload.name);
    $scope.organizationSettings.logotypeFileName = $scope.fileToUpload.name;

    $scope.$apply();
};

我认为绑定更改可以更容易地完成，下面我将解释如何做到这一点。通过将ng模型设置为输入，它将自动将输入控件绑定到控制器范围中定义的变量。因此，如果指定新文件，它将自动更新模型$scope.fileToUpload。这与此相反：在JS中对$scope.fileToUpload所做的任何更改都将反映在DOM中

index.html-尝试替换

<input type="file" onchange=" angular.element(this).scope().setFile(this) ">

index.html-尝试替换

<input type="file" onchange=" angular.element(this).scope().setFile(this) ">

您不能将ng change用于文件上载，因为angularjs中的文件上载不支持绑定。这在angularjs中是一个问题

在其他情况下，当您使用

ng change

（文件上载除外）时，您必须使用

ng model

使ng change指令工作，以便在使用它时触发基于它的更改（因此只有您才能获得

“错误：无控制器：ngModel”

）

最好的解决方案是手动触发

$scope.$apply（）

，在编程设置输入模型时绑定到输入模型。

您不能使用ng change进行文件上载，因为angularjs中的文件上载不支持绑定。这在angularjs中是一个问题

在其他情况下，当您使用

ng change

（文件上载除外）时，您必须使用

ng model

使ng change指令工作，以便在使用它时触发基于它的更改（因此只有您才能获得

“错误：无控制器：ngModel”

）

最好的解决方案是手动触发

$scope.$apply（）

，在编程设置输入模型时绑定到输入模型。

我无法触发ng更改。如果我只是将点动更改为ng更改，我还会得到“错误：无控制器：ngModel”。第二个解决方案是可行的，为什么这是个坏主意？不知道错误是怎么出现的，除非你的代码在ng应用程序之外？至于第二部分……最好将代码保存在框架下，让angular自己监视所有数据，并且更容易测试，因为我无法触发ng更改。如果我只是将点动更改为ng更改，我还会得到“错误：无控制器：ngModel”。第二个解决方案是可行的，为什么这是个坏主意？不知道错误是怎么出现的，除非你的代码在ng应用程序之外？至于第二部分……最好将代码保存在框架下，让angular自己监视所有数据，这样更容易测试，但这不起作用。我需要从input-tag获取文件数组。这不起作用。我需要从input-tag获取文件数组。您不能使用angular的现代版本？什么版本是现代版本？2.0？我不是说最现代的。1.2或1.3可以，其他人给出的答案你不能使用现代版的angular？什么版本是现代版？2.0？我不是说最现代的。1.2或1.3可以，其他人给出的答案有效

<input type="file" ng-model="fileToUpload">

$scope.setFile = function(element) {
    $scope.fileToUpload = element.files[0];
    console.log($scope.fileToUpload.name);
    $scope.organizationSettings.logotypeFileName = $scope.fileToUpload.name;
  };