无法显示 bootstrap UI 模态

Question

在我的 AngularJS 应用程序中，我使用 ngIdle 模块并遵循作者在他的 Github https://hackedbychinese.github.io/ng-idle/ 上分享的演示。

我已经注入了所有正确的依赖项，并加载了所有正确的 CDN，功能是运行，但我的控制器似乎无法访问 bootstrap-ui $uibModal。

我的 CDN 和文件是这样加载的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-idle/1.3.2/angular-idle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

ui-bootstrap 和 ngIdel 所需的模块被注入：

var app = angular.module('myApp', ['ngIdle', 'ui.bootstrap']);

我的控制器在 Angular component 内，也有所需的注入：

app.component('patents', {
    bindings: { patents: '<' },
    templateUrl: 'p3sweb/app/components/patents/views/list-patents.htm',
    controller: function($state, $scope, Idle, Keepalive, $uibModal) {

    $scope.started = false;

        function closeModals() {
        if ($scope.warning) {
          $scope.warning.close();
          $scope.warning = null;
        }

        if ($scope.timedout) {
          $scope.timedout.close();
          $scope.timedout = null;
        }
        }

      $scope.$on('IdleStart', function() {
        closeModals();
        $scope.warning = $uibModal.open({
          templateUrl: 'warning-dialog.html',
          windowClass: 'modal-danger'
        });
      });

      $scope.$on('IdleEnd', function() {
        closeModals();
      });
});

问题

为什么当函数是运行并且没有返回错误时，当用户是 Idel 时模式没有打开？ HTML 下面提供如下。

<section>
  <p>
    <button type="button" class="btn btn-success" ng-hide="started" ng-click="start()">Start Demo</button>
    <button type="button" class="btn btn-danger" ng-show="started" ng-click="stop()">Stop Demo</button>
  </p>
</section>

<script type="text/ng-template" id="warning-dialog.html">
  <div class="modal-header">
   <h3>You're Idle. Do Something!</h3>
  </div>
  <div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
   <uib-progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</uib-progressbar>
  </div>

</script>
<script type="text/ng-template" id="timedout-dialog.html">
  <div class="modal-header">
   <h3>You've Timed Out!</h3>
  </div>
  <div class="modal-body">
   <p>
      You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
   </p>
 </div>
</script>

Answer 1

除 bootstrap css 外，您在这里一切都很好。我相信你需要包括 bootstrap 3 CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

因为您正在使用 angular ui bootstrap uibModal 并且其模板确实包含 bootstrap 3 类并包含 bootstrap 3 css 模态弹出窗口应该可以工作。

无法显示 bootstrap UI 模态

failing to display bootstrap UI Modal

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap

ng-idle