Question

我有一个用户输入初始数据的页面，之后他点击了Calculate。点击后，在进行计算时，应该会出现带有加载微调器的gif图像。结果准备就绪后，gif-image应该消失，结果应该显示在页面上。以下是我使用的代码：

$scope.loading=false; //initially the img is invisible    
$scope.calc=function(){
      $scope.loading=true;//make the img visible
      var result=MyService.calc(input_data); //processing data
      $scope.result=result;
      $scope.loading=false;//hide the img
}

HTML图像定义如下：

<div class="span1">
  <div ng-if="loading"><img ng-src="img/ajax-loader.gif"></div>
</div>

这是预期的事情顺序。但实际上它的工作方式如下：点击计算后，图像不会出现，经过一段时间的计算后，图像会显示并转义。

计算是在服务中进行的。

问题是什么？我已经尝试在服务中创建一个$q.defer()来解析结果。然后在控制器中显示promise.then函数内的结果。但它没有用。

Answer 1

使用$timeout。模型在执行过程中不会更新

的JavaScript

$scope.calc=function(){
      $scope.loading=true;//make the img visible

      $timeout(function(){
          var result=MyService.calc(input_data); //processing data
          $scope.result=result;
          $scope.loading=false;//hide the img
      });
}

（$timeout必须像$scope）

那样依赖注入

Angular控制器中的操作顺序无法以正确的方式工作

1 个答案: