我正在尝试在此链接上ng-idle连接到此工作示例中的外观css及其外观。我已将链接中的代码解释为意味着我应该键入下面的代码来实现它，但下面的代码不会将控制器或样式与视图挂钩。 需要对下面的代码进行哪些特定更改才能成功实现 ng-idle 在上面的演示链接中的外观，带有模式警告和按钮样式等？modal
可以通过单击此文件共享站点的链接下载功能齐全的 MINIMAL 复制品在您的计算机上重新创建这种情况，然后查看当前index.html的app.js内容如下：
index.html是：
<html ng-app="demo">
<head>
<title title>NgIdle Sample</title>
</head>
<body>
<section data-ng-controller="DemoCtrl">
{{ started }} <!-- this SYSO of the `start` variable does not print -->
<p>
<button type="button" class="btn btn-success" data-ng-hide="started" data-ng-click="start()">Start Demo</button>
<button type="button" class="btn btn-danger" data-ng-show="started" data-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">
<progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</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>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-idle/angular-idle.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
并且app.js是：
'use strict';
angular.module('demo', ['ngIdle', 'ui.bootstrap'])
.controller('DemoCtrl', function($scope, Idle, Keepalive, $modal){
$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 = $modal.open({
templateUrl: 'warning-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.$on('IdleEnd', function() {
closeModals();
});
$scope.$on('IdleTimeout', function() {
closeModals();
$scope.timedout = $modal.open({
templateUrl: 'timedout-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.start = function() {
closeModals();
Idle.watch();
$scope.started = true;
};
$scope.stop = function() {
closeModals();
Idle.unwatch();
$scope.started = false;
};
})
.config(function(IdleProvider, KeepaliveProvider) {
IdleProvider.idle(5);
IdleProvider.timeout(5);
KeepaliveProvider.interval(10);
})
.run(['Idle', function(Idle) {
Idle.watch();
}]);
现在重新创建了问题，需要对上面的代码进行哪些更改以使其实现模态和样式，如 OP 顶部链接中的示例/演示中所示？