Angularjs нг-шоу не работает внутри модального

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.

Вы также можете обратиться к этому $ применить в setTimeout