这就是我的观点:
<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
?为什么会这样?
答案 0 :(得分:4)
问题是您正在异步更改$ scope对象,因此angular不知道它需要处理的更改。 Angular不会经常“监视”您的$ scope对象。您通常不必明确使用$scope.$apply()
的原因是因为如果您在角度生态系统内部(即:控制器构造函数,$范围函数等),angular会自动为您执行此操作。< / p>
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
服务只是$scope.$apply()
的包装,但会自动为您触发摘要周期:https://stackoverflow.com/a/19609851/580487
TLDR;异步功能[除了内置的角度内容]在角度生态系统之外,因此您必须通过<select id="expertise" class="select-large required" name="expertise[]" multiple="" aria-required="true" required="required" aria-invalid="true">
<option value="Disaster Management">Disaster Management </option>
<option value="Energy Security">Energy Security </option>
<optgroup label="Environment">
<option value="Climate">Climate </option>
<option value="Resource Security">Resource Security </option>
</optgroup>
</select>