Angularjs ng-show 在模态中不起作用答案

【问题标题】：Angularjs ng-show is not working inside the modalAngularjs ng-show 在模态中不起作用
【发布时间】：2019-05-08 13:51:00
【问题描述】：

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

如果我关闭并再次打开弹出窗口，则进度条第一次没有显示。

以下是我的控制器代码：

$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。还是不行。

【问题讨论】：

您需要使用 $apply 进行包装，以便 Angular 了解更改 stackoverflow.com/questions/21472327/apply-in-settimeout
这也可能有帮助：stackoverflow.com/questions/32345006/…

标签： angularjs

【解决方案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

【讨论】：