ng-model获取不了type=file值的解决办法

最新推荐文章于 2020-07-21 17:00:55 发布

stevejobson

最新推荐文章于 2020-07-21 17:00:55 发布

阅读量4.2k

点赞数 1

分类专栏： angular 文章标签： angular ngmodel angular文件上传

本文链接：https://blog.csdn.net/stevejobson/article/details/53856634

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看一个简单例子：

<!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>

运行效果：