代码之家 › 专栏 › 技术社区 › Guzzyman

如何解决类型错误:angular.element(…).scope(…).selectFileForUpload不是函数[重复]

angularjs-scope asp.net-mvc angularjs javascript

-1

Guzzyman · 技术社区 · 7 年前

这个问题已经有了答案:

ng-model for `<input type=“file”/>` (with directive DEMO) 12个答案

我正在尝试使用angularjs在asp.net mvc中上载一个文件。我有以下作为我的文件上传界面。

<form name="f1" class="form-horizontal" ng-submit="SaveFile()" novalidate>
    <div style="color: red">{{Message}}</div>
    <div class="col-md-12">
        <label>Select File:</label>
        <input type="file" name="file" accept="image/*"
               onchange="angular.element(this).scope().selectFileForUpload(this.files)"
               class="form-control input-bordered" required>                      
        <span class="text-danger" ng-show="(f1.file.$dirty || IsFormSubmitted) && f1.file.$error.required">Image required!</span>
        <span class="text-danger">{{ FileInvalidMessage }}</span>
    </div>
    <div class="col-md-12">
        <label>Description:</label>
        <input type="text" name="uFileDescription" class="form-control input-bordered {{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid' : ''):'')}}" autofocus data-ng-model="FileDescription" />
    </div>
    <div class="col-md-12">
        <button type="submit" class="btn btn--primary">Upload File</button>
        <a href="#/FileUpload" class="btn btn--secondary">Cancel</a>
    </div>
</form>

出现上述错误的部分是:

 <input type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileForUpload(this.files)" class="form-control input-bordered" required>

我的控制器的一部分将此函数作为范围变量。

      $scope.selectFileForUpload = function (files) {
            $scope.SelectedFileForUpload = file[0];
      }

我应该做些什么来避免这个错误?

1 回复 | 直到 7 年前

georgeawg 7 年前

Ì¶$Ì¶sÌ¶cÌ¶oÌ¶pÌ¶eÌ¶.Ì¶sÌ¶eÌ¶lÌ¶eÌ¶cÌ¶tÌ¶FÌ¶iÌ¶lÌ¶eÌ¶FÌ¶oÌ¶rÌ¶UÌ¶pÌ¶oÌ¶aÌ¶dÌ¶(Ì¶)Ì¶{Ì¶
$scope.selectFileForUpload = function(files) {
   $scope.SelectFileForUpload = files[0];
}

坦率地说,函数名和变量名的大小写不同是不好的编程实践。这使得代码容易出错,而且很难阅读。

而不是使用 angular.element(this).scope() ,我建议使用与 ng-model controller :

app.directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

用法:

<input type="file" name="file" accept="image/*"
       Ì¶oÌ¶nÌ¶cÌ¶hÌ¶aÌ¶nÌ¶gÌ¶eÌ¶=Ì¶"Ì¶aÌ¶nÌ¶gÌ¶uÌ¶lÌ¶aÌ¶rÌ¶.Ì¶eÌ¶lÌ¶eÌ¶mÌ¶eÌ¶nÌ¶tÌ¶(Ì¶tÌ¶hÌ¶iÌ¶sÌ¶)Ì¶.Ì¶sÌ¶cÌ¶oÌ¶pÌ¶eÌ¶(Ì¶)Ì¶.Ì¶sÌ¶eÌ¶lÌ¶eÌ¶cÌ¶tÌ¶FÌ¶iÌ¶lÌ¶eÌ¶FÌ¶oÌ¶rÌ¶UÌ¶pÌ¶lÌ¶oÌ¶aÌ¶dÌ¶(Ì¶tÌ¶hÌ¶iÌ¶sÌ¶.Ì¶fÌ¶iÌ¶lÌ¶eÌ¶sÌ¶)Ì¶"Ì¶
       select-ng-files ng-model="files"
       ng-change="selectFileForUpload(files)"
       class="form-control input-bordered" required>

这个 .scope() 方法 angular.element 要求 Debug Data 要启用。这与AngularJS的小型版本不同。

此外,使用 onchange 属性未与AngularJS执行上下文及其摘要循环集成。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定、异常处理、属性监视等。

有关详细信息,请参见 ng-model for <input type=âfileâ/> (with directive DEMO)