Невозможно связать область видимости внутри функции, вызывающей модальный bootstrap

Question

У меня есть функция, которая проверяет истечение сессии, где, когда сессия заканчивается, она вызывает функцию, в которой внутри я показываю модал bootstrap с некоторой привязкой области действия к этому модалу. проблема в том, что модальное отображение ни с одной из моих областей видимости. Но когда я помещаю эти переменные привязки области видимости вне функции, вызывающей модальный режим, это работает. Мне нужен способ создать больше функций, которые могут как-то изменять такие вещи, как модальное название и тело.

mainCtrl. js

    angular.module('mainCtrl', ['appServices', 'ngAnimate'])

      .controller('mainCtrl', function ($scope, $timeout, $location, AuthService, $rootScope, $interval, $window, $uibModal, authToken) {


     // show modal function
      $scope.showModal = function () {

         $scope.modalExpireHeader = 'Session expire timeout';
         $scope.modalExpireBody = 'Your Session will expire in 5 sec, would you like to renew?';
          $("#myModal").modal({backdrop: "static"});


      };

     // check session      
     $scope.checkSession = function () {
            if (AuthService.isLoggedIn()) {
                // set interval for checking
                const interval = $interval(function () {
                    //get token from localstorage (browser)
                    const token = $window.localStorage.getItem('token');
                    // console.log(token)
                    // if not logged always token == null
                    if (token === null) {
                        // cancel checking interval
                        $interval.cancel(interval)
                    } else {
                        // TODO: convert token to timestamp
                        // Parse JSON Web Token using AngularJS for timestamp conversion

                        // function for convert jSON token to timestamp
                        self.parseJwt = function (token) {
                            const base64Url = token.split('.')[1];
                            const base64 = base64Url.replace('-', '+').replace('_', '/');
                            return JSON.parse($window.atob(base64));
                        };

                        // convert
                        const tokenObject = self.parseJwt(token);

                        const current_timestamp = Math.floor(Date.now() / 1000); // Get current datetime

                        //console exp timestamp for token
                        // console.log(tokenObject.exp)

                        const timeRemained = tokenObject.exp - current_timestamp;

                        if (timeRemained <= 0) {
                            console.log('token expired');
                            // cancel checking intervals

                            $interval.cancel(interval);

                           // call modal
                            $scope.showModal();

                        } else {
                            console.log('token not expired');
                            return false
                        }

                    }
                }, 2000)
            }
        };
   });

index. html

 <div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">

    <!-- Modal content-->
       <div class="modal-content">
          <div class="modal-header">
            <button type="button" ng-click="endSession()" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{modalExpireHeader}}</h4>
        </div>
        <div class="modal-body">
            <p>{{modalExpireBody}}</p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="renewSession()" class="btn btn-primary" data-dismiss="modal">Yes</button>
            <button type="button" ng-click="endSession()" class="btn btn-danger" data-dismiss="modal">No</button>
         </div>
         </div>
     </div>

Answer 1

Это потому, что ваш модал выходит за рамки вашего контроллера. Модал добавляется к <body>. Вы можете попробовать ui- bootstrap, где вы можете передать данные в модальный экземпляр

пример:

class Controller {
  constructor($scope, $uibModalInstance, stuff) {
    this.data = stuff
    this.$uibModalInstance = $uibModalInstance
  }

  close () {
    this.$uibModalInstance.close({...yourResolvedData})
  }
}

const result = await $uibModal.open({
  backdrop: 'static',
  size: 'md',
  controller: Controller,
  controllerAs: '$ctrl',
  template: yourModalTemplate
  resolve: {  // you can pass data here
    stuff: () => {...yourData}
  }
})

console.log(result) // the resolved data