Question

单击一个按钮即可打开模式弹出窗口。模态弹出窗口正在打开，我想在模态弹出窗口中显示一个进度条。收到回复后，我想将其隐藏。

如果我再次关闭并打开弹出窗口，则会在第一时间不显示进度条。

下面是我的控制器代码：

$scope.clickUpload = function(){
   $('#import_poi_modal').modal('show');

   setTimeout(function(){ 
      $scope.fileChangeProgress = true;
      console.log($scope.fileChangeProgress)
   },1000);
}

HTML：

<div class="modal fade" id="import_poi_modal">
   <div class="modal-dialog">
      <div class="modal-content">

         <div class="modal-body">

            <div class="center-content" ng-show="fileChangeProgress"> //here im using the variable to show and hide
                <div class="col-6">
                    <div class="progress m-t-30 m-b-30" >
                        <div class="progress-bar progress-bar-orange active progress-bar-striped" style="width: 100%; height:14px;" role="progressbar"> </div>
                    </div>
                </div>
            </div>


        </div>
      </div>
   </div>
</div>

我尝试使用 setTimeout 。仍然没有用。

Answer 1

由于setTimeout是一种javascript函数（不是Angular函数），因此您需要使用$ apply通知Angular更改。

setTimeout(function(){
  $scope.$apply(
    function() {
      $scope.fileChangeProgress = true;
      console.log($scope.fileChangeProgress);
    }
  );
},1000);

另一种解决方案是使用Angular本机$ timeout支持：

$timeout(function(){ 
  $scope.fileChangeProgress = true;
  console.log($scope.fileChangeProgress)
},1000);

无需$ apply就可以为您提供相同的目的。

您也可以参考此$apply in setTimeout

AngularJS ng-show在模态内部不起作用

1 个答案: