Angularjs图像加载事件

时间:2016-04-24 18:50:24

标签: javascript angularjs

大家好我有Angularjs代码,当单击复选框时会加载图像。

代码Html1 - 呈现复选框

    <li ng-repeat="Dep in oDep" >
    <input  type="checkbox" ng- model="cboxDepState[Dep.num]" 
ng-change="OnDepStateChange(Dep.num,Dep.nom)" />

</li>

代码HTML2 - 这是加载程序映像。

<div bg data-ng-show="loading['ville']" class="text-center ng-hide">
<img src="" />
</div>

Code AngularsJS

var app = angular
             .module("HomeModule", [])
             .controller("HomeController", function (){
              $scope.loading =[];

 $scope.OnDepStateChange = function (numDep, nom) {              
               $scope.loading['ville'] = true;
               //code inside function take 5 second
               //
                $scope.loading['ville'] = false;
}});

所有代码工作正常只是加载图像不起作用 你能帮帮我吗?

1 个答案:

答案 0 :(得分:0)

你需要在长功能内给角度一些呼吸空间。使用$ timeout来执行冗长的代码。完成后隐藏该功能内的加载器。

$scope.OnDepStateChange = function (numDep, nom) {              
      $scope.loading['ville'] = true;

       $timeout(function(){
            //code inside function take 5 second
            //

            $scope.loading['ville'] = false; 
       })         
})