AngularJS $interval
▌Background
I was
implementing a function like the pop-up message on Booking.com
Referring to
the following picture, we can see the pushed message from server-side and the
message disappear within 3 – 5 seconds.
In
.NET application, we can use SignalR to make a good practice of server-side
pushing messages.
For
the pop-up messages on front-end, we can use AngularJS service :
$interval to set an interval of the messages.
▌Environment
l AngularJS 1.4.7
▌Implement
▋HTML
<div ng-app="app" ng-controller="HomeCtrl">
<div class="div-left-bottom" ng-hide="IsHideDivBroadcast">
<ul ng-repeat="item in BroadcastMsgs">
<li>{{item.User}} {{item.Message}}</li>
</ul>
</div>
</div>
|
▋CSS
.div-left-bottom {
width:150px;
float:left;
position:fixed;
left:0px;
bottom:0px;
z-index:20;
background-color:lightgrey;
border:2px solid #69c;
_position:absolute; /* position fixed for
IE6 */
}
.div-left-bottom li {
font-size:10px;
font-family:"Consolas";
}
|
▋Javascript
var app =
angular.module('app', [])
.controller('HomeCtrl', function ($scope, $interval) {
//Variables
$scope.BroadcastMsgs = []; //Broadcast
messages
var broadcastIntervalPromise; //The promise for
broadcasting messages
/* Starts the interval */
$scope.startBroadcastInterval = function () {
$scope.IsHideDivBroadcast = false;
// stops any running interval to
avoid two intervals running at the same time
$scope.stopBroadcastInterval();
// store the interval promise
broadcastIntervalPromise = $interval(resetBroadcastMsgs, 1000 * 6);
};
/* Stops the interval */
$scope.stopBroadcastInterval = function () {
$interval.cancel(broadcastIntervalPromise);
};
/* Stop the interval when the scope
is destroyed */
$scope.$on('$destroy', function () {
$scope.stopBroadcastInterval();
});
/* Clear the braodcast messages*/
function resetBroadcastMsgs()
{
$scope.BroadcastMsgs = [];
}
//Testing from here
--------------------------------------
//Start the interval
$scope.startBroadcastInterval();
$scope.BroadcastMsgs.push({
"User": "JB",
"Message": "reserved a
room!"
})
$scope.BroadcastMsgs.push({
"User": "Lily",
"Message": "reserved 2
rooms!"
})
//Testing ends here
--------------------------------------
});
|
broadcastIntervalPromise = $interval(resetBroadcastMsgs, 1000 *
6) :
===> Set an 6 secs interval for
triggering the function : resetBroadcastMsgs
▌Reference
沒有留言:
張貼留言