我是角的新手。我试图从HTML“文件”字段读取上传的文件路径，每当“更改”发生在这个字段上。如果我使用“onChange”，它可以工作，但当我以angular的方式使用“ng-change”时，它就不起作用了。
<script>
var DemoModule = angular.module("Demo",[]);
DemoModule .controller("form-cntlr",function($scope){
$scope.selectFile = function()
{
$("#file").click();
}
$scope.fileNameChaged = function()
{
alert("select file");
}
});
</script>
<div ng-controller="form-cntlr">
<form>
<button ng-click="selectFile()">Upload Your File</button>
<input type="file" style="display:none"
id="file" name='file' ng-Change="fileNameChaged()"/>
</form>
</div>
fileNameChaged()从不调用。Firebug也不会显示任何错误。
我建议创建一个指令
<input type="file" custom-on-change handler="functionToBeCalled(params)">
app.directive('customOnChange', [function() {
'use strict';
return {
restrict: "A",
scope: {
handler: '&'
},
link: function(scope, element){
element.change(function(event){
scope.$apply(function(){
var params = {event: event, el: element};
scope.handler({params: params});
});
});
}
};
}]);
这个指令可以使用很多次，它使用自己的作用域，不依赖于父作用域。你也可以给handler函数一些参数。处理函数将与作用域对象一起调用，该对象在您更改输入时处于活动状态。
$apply在每次调用change事件时更新您的模型
类似于这里的其他一些很好的答案，我写了一个指令来解决这个问题，但是这个实现更紧密地反映了附加事件的角度方式。
你可以像这样使用指令:
HTML
<input type="file" file-change="yourHandler($event, files)" />
如您所见，您可以将所选择的文件注入到事件处理程序中，就像您将$event对象注入到任何ng事件处理程序中一样。
Javascript
angular
.module('yourModule')
.directive('fileChange', ['$parse', function($parse) {
return {
require: 'ngModel',
restrict: 'A',
link: function ($scope, element, attrs, ngModel) {
// Get the function provided in the file-change attribute.
// Note the attribute has become an angular expression,
// which is what we are parsing. The provided handler is
// wrapped up in an outer function (attrHandler) - we'll
// call the provided event handler inside the handler()
// function below.
var attrHandler = $parse(attrs['fileChange']);
// This is a wrapper handler which will be attached to the
// HTML change event.
var handler = function (e) {
$scope.$apply(function () {
// Execute the provided handler in the directive's scope.
// The files variable will be available for consumption
// by the event handler.
attrHandler($scope, { $event: e, files: e.target.files });
});
};
// Attach the handler to the HTML change event
element[0].addEventListener('change', handler, false);
}
};
}]);
我扩展了@Stuart Axon的想法，为文件输入添加双向绑定(即允许通过将模型值重置为null来重置输入):
app.directive('bindFile', [function () {
return {
require: "ngModel",
restrict: 'A',
link: function ($scope, el, attrs, ngModel) {
el.bind('change', function (event) {
ngModel.$setViewValue(event.target.files[0]);
$scope.$apply();
});
$scope.$watch(function () {
return ngModel.$viewValue;
}, function (value) {
if (!value) {
el.val("");
}
});
}
};
}]);
Demo
这个指令也会传递选定的文件:
/**
*File Input - custom call when the file has changed
*/
.directive('onFileChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.onFileChange);
element.bind('change', function() {
scope.$apply(function() {
var files = element[0].files;
if (files) {
onChangeHandler(files);
}
});
});
}
};
});
HTML的使用方法:
<input type="file" ng-model="file" on-file-change="onFilesSelected">
在我的控制器中:
$scope.onFilesSelected = function(files) {
console.log("files - " + files);
};
没有文件上传控件的绑定支持
https://github.com/angular/angular.js/issues/1375
<div ng-controller="form-cntlr">
<form>
<button ng-click="selectFile()">Upload Your File</button>
<input type="file" style="display:none"
id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
</form>
</div>
而不是
<input type="file" style="display:none"
id="file" name='file' ng-Change="fileNameChanged()" />
你能试试吗?
<input type="file" style="display:none"
id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />
注意:这要求angular应用程序始终处于调试模式。如果调试模式被禁用，这将在产品代码中不起作用。
在函数中变化
而不是
$scope.fileNameChanged = function() {
alert("select file");
}
你能试试吗?
$scope.fileNameChanged = function() {
console.log("select file");
}
下面是一个文件上传的工作示例，拖放文件上传可能会有帮助
http://jsfiddle.net/danielzen/utp7j/
Angular文件上传信息
在ASP中上传AngularJS文件的URL。网
https://github.com/geersch/AngularJSFileUpload
AngularJs原生多文件上传与NodeJS的进展
http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/
ngUpload - AngularJS中使用iframe上传文件的服务
http://ngmodules.org/modules/ngUpload
