首先看一个简单例子:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body style="padding: 100px;">
<input type="text" ng-model="demo01" /><br>
text:{{demo01}}
<br>
<input type="file" ng-model="demo02" />
file:{{demo02}}
</body>
</html>
运行结果:
可以看出:ng-model获取不了type=file的值
解决办法:
angular.directive
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body style="padding: 100px;">
<div ng-controller="testCtrl">
<input type="file" ng-test-upload="testFile" name="testFile" />
<button ng-click="demo()">getFile</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module('test', []);
app.directive('ngTestUpload', function() {
return {
restrict: 'ACE',
link: function(scope, element, attr) {
element.on('change', function() {
scope.file = this.files[0];
})
},
scope: {
file: '=ngTestUpload'
}
}
});
app.controller('testCtrl', testCtrl);
function testCtrl($scope) {
$scope.demo = function() {
console.log($scope.testFile);
}
}
</script>
</body>
</html>
运行效果: