I am trying to get ng-idle to hook up to css and modal the way it looks in this working example at this link. I have interpreted the code at the link to mean that I should type the code below to implement it, but the code below does not hook the controller or the styling up to the view. What specific changes need to be made to the code below to successfully implement ng-idle the way it looks in the demo link above, with modal warning and with styling for the buttons, etc.?
The situation can be recreated on your computer by downloading a fully functioning MINIMAL reproduction by clicking the link to this file sharing site, and then viewing the contents of index.html and app.js which are currently the following:
index.html is:
<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>
And app.js is:
'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();
}]);
Now that the problem is recreated, what changes need to be made to the code above to get it to implement modal and styling as in the example/demo at the link at top of the OP?
< section >tag bound toDemoCtrl. Is this becauseangular-idle.jscontrols the entire browser window and not just thesectionbound toDemoCtrl? I am also curious if I add other controllers to other html elements inindex.htmlif clicking on the html elements controlled by other controllers will also restart the ngIdle timer? Thank you in advance for clarifying this. – Gemmagemmate