ng-repeat 不处理 FileReader
ng-repeat not processing upon FileReader
我的观点是这样的:
<body ng-controller="AdminCtrl">
<img ng-repeat="pic in pics" ng-src="{{pic}}" />
<form ng-submit="postPic()">
<input id="photos" type="file" accept="image/*" multiple/>
<button>Add Pics</button>
</form>
这是控制器:
app.controller('AdminCtrl',['$scope', function($scope){
$scope.pics =[];
$scope.postPic = function() {
var files = $('#photos').get(0).files;
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
var photoFile = files[i];
var reader = new FileReader();
reader.onloadend = function(e){
$scope.pics.push(e.target.result);
console.log($scope.pics);
};
reader.readAsDataURL(photoFile);
}
};
尽管我选择了很多文件并且它们也显示在控制台中(尽管是异步的),但我似乎无法根据 $scope.pics
的更新来更新视图。 $scope.pics
不是被监视了吗?为什么会这样?
问题是您正在异步更改 $scope 对象,因此 angular 不知道它需要处理的更改。 Angular 不会经常 "watch" 你的 $scope 对象。您通常不必显式使用 $scope.$apply()
的原因是,如果您在 angular 生态系统中(即:控制器构造函数, $scope 函数等)。
app.controller('AdminCtrl',['$scope', function($scope){
$scope.pics =[];
$scope.postPic = function() {
var files = $('#photos').get(0).files;
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
var photoFile = files[i];
var reader = new FileReader();
reader.onloadend = function(e){
$scope.pics.push(e.target.result);
console.log($scope.pics);
$scope.$apply(); // force digest cycle
};
reader.readAsDataURL(photoFile);
}
};
这与 angular 提供 $timeout
服务的原因相同,它只是 setTimeout
的包装器,但会自动为您触发摘要循环:
TLDR;异步功能 [除了 angular 内置的东西] 不在 angular 生态系统中,因此您必须让 angular 通过 $scope.$apply()
了解 $scope 的变化
我的观点是这样的:
<body ng-controller="AdminCtrl">
<img ng-repeat="pic in pics" ng-src="{{pic}}" />
<form ng-submit="postPic()">
<input id="photos" type="file" accept="image/*" multiple/>
<button>Add Pics</button>
</form>
这是控制器:
app.controller('AdminCtrl',['$scope', function($scope){
$scope.pics =[];
$scope.postPic = function() {
var files = $('#photos').get(0).files;
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
var photoFile = files[i];
var reader = new FileReader();
reader.onloadend = function(e){
$scope.pics.push(e.target.result);
console.log($scope.pics);
};
reader.readAsDataURL(photoFile);
}
};
尽管我选择了很多文件并且它们也显示在控制台中(尽管是异步的),但我似乎无法根据 $scope.pics
的更新来更新视图。 $scope.pics
不是被监视了吗?为什么会这样?
问题是您正在异步更改 $scope 对象,因此 angular 不知道它需要处理的更改。 Angular 不会经常 "watch" 你的 $scope 对象。您通常不必显式使用 $scope.$apply()
的原因是,如果您在 angular 生态系统中(即:控制器构造函数, $scope 函数等)。
app.controller('AdminCtrl',['$scope', function($scope){
$scope.pics =[];
$scope.postPic = function() {
var files = $('#photos').get(0).files;
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
var photoFile = files[i];
var reader = new FileReader();
reader.onloadend = function(e){
$scope.pics.push(e.target.result);
console.log($scope.pics);
$scope.$apply(); // force digest cycle
};
reader.readAsDataURL(photoFile);
}
};
这与 angular 提供 $timeout
服务的原因相同,它只是 setTimeout
的包装器,但会自动为您触发摘要循环:
TLDR;异步功能 [除了 angular 内置的东西] 不在 angular 生态系统中,因此您必须让 angular 通过 $scope.$apply()