angular-visibility-change
Version:
Detect window visibility changes in Angular.
47 lines (38 loc) • 1.43 kB
HTML
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
angular-visibility-change: Broadcast API
</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="../src/angular-visibility-change.js"></script>
<script type="text/javascript">
angular.module('Demo', ['visibilityChange'])
.run(function(VisibilityChange) {
VisibilityChange.configure({broadcast: true});
})
.factory('now', function() {
return function() {
return moment().format('HH:mm:ss');
};
})
.controller('DemoController', function($rootScope, $scope, now) {
$scope.messages = [];
$rootScope.$on('pageBecameHidden', function() {
$scope.messages.push('pageBecameHidden was broadcast at ' + now());
})
$rootScope.$on('pageBecameVisible', function() {
$scope.messages.push('pageBecameVisible was broadcast at ' + now());
});
});
</script>
</head>
<body ng-controller="DemoController">
<p>Navigate to another tab/window and then return here</p>
<ul>
<li ng-repeat="message in messages track by $index">{{ message }}</li>
</ul>
</body>
</html>