Angularjs ng-show 不在模式内工作

Question

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

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

下面是我的 Controller 代码:

$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