时间戳

首页 > 解决方案 > 无法在调用引导模式的函数内绑定范围

angularjs - 无法在调用引导模式的函数内绑定范围

问题描述

我有一个检查会话到期的函数，当会话到期时，它会调用一个函数，在该函数中我显示一个引导模式，该模式上具有一些范围绑定。问题是，我的范围绑定中没有模式显示。但是，当我将这些范围绑定变量放在调用模态的函数之外时，它就起作用了。我想要一种创建更多功能的方法，这些功能可以以某种方式改变模态标题和正文等内容。

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)
            }
        };
   });

索引.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>

模态截图

标签： angularjs

解决方案

那是因为您的模式超出了控制器的范围。模态被附加到<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

推荐阅读