为什么我会像在ng-file-upload示例用法代码中那样在没有延迟的情况下在AngularJS $timeout服务中包装函数?

前端之家收集整理的这篇文章主要介绍了为什么我会像在ng-file-upload示例用法代码中那样在没有延迟的情况下在AngularJS $timeout服务中包装函数?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在包含ng-file-upload( https://github.com/danialfarid/ng-file-upload)的样本使用代码的大多数小提琴中,如( http://jsfiddle.net/danialfarid/maqbzv15/1118/)中的那个,上传响应回调函数将其代码包装在$timeout服务调用中,但这些调用没有任何延迟参数传入

$timeout(https://docs.angularjs.org/api/ng/service/ $timeout)的Angular.js文档表明延迟是可选的,但是如果不延迟正在运行的代码,为什么要调用$timeout.换句话说,不是以下,为什么不在之后做一个:

//inject angular file upload directives and services.
var app = angular.module('fileUpload',['ngFileUpload']);

app.controller('MyCtrl',['$scope','Upload','$timeout',function ($scope,Upload,$timeout) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
  url: 'https://angular-file-upload-cors-srv.appspot.com/upload',data: {username: $scope.username,file: file},});

file.upload.then(function (response) {
  $timeout(function () {
    file.result = response.data;
  });
},function (response) {
  if (response.status > 0)
    $scope.errorMsg = response.status + ': ' + response.data;
},function (evt) {
  // Math.min is to fix IE which reports 200% sometimes
  file.progress = Math.min(100,parseInt(100.0 * evt.loaded / evt.total));
});
}
}]);

在所有这些示例中,是否有任何理由要使用$timeout包装器?以下file.upload调用是否会在其位置工作?:

file.upload.then(function (response) {
  file.result = response.data;
},parseInt(100.0 * evt.loaded / evt.total));
});

编辑:我可以看到它似乎没有$timeout包装器运行,但它包含在所有示例中的事实使我认为这是故意的,这可能意味着有一个安全性/健壮性/浏览器兼容性边缘情况我不明白这里.

这与Angular的消化周期有关.在我继续解释摘要周期是什么之前,我将尝试用一个例子来证明这一点.想象一下以下代码
angular.module('app',[]).controller('TestController',function($scope){
    $scope.name = 'Tom';
    setTimeout(function(){
        $scope.name = 'Bob';
    },2000);
}]);

这段代码存在固有的问题.尽管我们在2秒后更改了$scope.name的变量,但Angular完全没有意识到对$scope.name的这一更改.如果您现在考虑以下我们使用$timeout的示例:

angular.module('app',function($scope,$timeout){
    $scope.name = 'Tom';
    $timeout(function(){
        $scope.name = 'Bob';
    },2000);
}]);

Angular将在两秒后调用匿名函数,然后,它将从Angular的摘要周期开始.这是$timeout和setTimeout之间的主要区别,即正在运行的摘要周期.

摘要周期(简单地说)Angular遍历所有观察者(绑定),检查任何更改并重新呈现适当的位置.您可能已经看到提到$scope.$适用于其他地方 – 这是如何开始摘要周期.

关于您提供的示例:如果未使用$timeout,Angular将不会意识到已进行任何更改,因此您的视图将不会更新.我之前提到$scope.$申请,所以你可能想知道为什么我们不只是使用它?使用$scope.$apply的问题是您无法确定摘要周期是否已在进行中.如果你在一个人发现时调用它,你会看到一个错误“$digest已在进行中”. $timeout只会在当前周期之后运行,因此不会发生此错误.

人们通常会毫不拖延地使用$timeout来通知Angular第三方(比如你的文件上传者)已做出更改,否则就不会知道发生了什么.

希望这可以解决问题.

汤姆

原文链接:https://www.f2er.com/angularjs/143336.html

猜你在找的Angularjs相关文章