Angularjs Image loaded event

Angularjs Image loaded event

本文关键字:event loaded Image Angularjs      更新时间:2023-09-26

大家好,我有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;
}});

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

您需要在长函数内给角度一些喘息空间。使用$timeout执行冗长的代码。完成后将加载程序隐藏在该函数中。

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