从输入的 onchange 调用函数答案

【问题标题】：Call a function from input's onchange从输入的 onchange 调用函数
【发布时间】：2016-10-24 07:53:13
【问题描述】：

我使用控制器作为语法。

当我的文件输入发生变化时，我想触发一个函数。

怎么做？

下面是我的 $scope 语法代码

<input class="upload" type="file" accept="image/*" ng-model="image"
                onchange="angular.element(this).scope().uploadImage(this)">

【问题讨论】：

为什么不使用ng-change="yourController.yourFunction()"？
如果 type="file" ,ng-change 不能使用。

标签： angularjs

【解决方案1】：

如发现 here，您可以使用自定义指令来侦听输入文件中的更改。

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js：

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});

directive.js：

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.bind('change', onChangeHandler);
    }
  };
});

View JSFIDDLE

【讨论】：

【解决方案2】：

您可以使用ng-change="nameOfFunction()" 这将在此输入更改时触发

或使用HERE

【讨论】：

我不认为ng-change 在<input type="file"> 中工作根据这个：github.com/angular/angular.js/issues/1375（我没有测试...）。不过angular-file-upload 确实是一个可能的解决方案。

【解决方案3】：

使用角度scope.$watch。在您的控制器中，添加以下内容：

scope.$watch("image", function(newValue, oldValue) {
   // Do anything you want here
   scope.uploadImage(newValue);
}

更多关于scope.$watch的信息：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

【讨论】：