ブートストラップのUIを表示できませんModal

Question

私のAngularJSアプリケーションでは、ngIdleモジュールを使用しており、作成者がGithub https://hackedbychinese.github.io/ng-idle/で共有しているデモに続いています。

すべての適切な依存関係が注入されていて、すべての適切なCDNがロードされていて、機能が実行されていますが、コントローラがアクセスできないと思われます。bootstrap-ui$uibModal。

私のCDNとファイルはのようなロードされます

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

と角component内にある私のコントローラ、：ui-bootstrapとngIdelの両方のための

<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> 

必要なモジュールは、なるように注入され、また、そのような必要な注射を有する：

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

ブートストラップCSS以外はすべてここでうまくいきます。 私はあなたがuibModalとそのテンプレートは、ブートストラップ3つのクラスが含まれていた角度UIのブートストラップを使用して、ブートストラップ3つのCSSのモーダルポップアップが動作するはず含めているので、あなたは、ブートストラップ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"> 

を含める必要が信じています。