I'm currently in the process of developing an application that requires polling live data every 10 seconds. When there is a change in the data, it needs to be highlighted within the view. I have achieved this using jQuery, but now I would like to implement it with an Angular template instead.
Here is my controller:
angular.module('myApp.controllers', [])
.controller('MainCtrl', ['$rootScope', 'liveDataPoller', function($rootScope, liveDataPoller) {
$rootScope.liveData = liveDataPoller.getData();
}]);
This is my directive:
angular.module('myApp.directives', []).
directive('liveValue', function() {
return {
restrict: 'A',
scope: {
val: '='
},
link: function(scope, element, attrs) {
scope.$watch('val', function(newValue, oldValue) {
if(newValue && oldValue && (newValue !== oldValue)) {
if(newValue < oldValue) {
element.removeClass("up").addClass("down");
} else {
element.removeClass("down").addClass("up");
}
} else {
element.removeClass("down").removeClass("up');
}
});
}
}
});
This is my view:
<div live-value val="liveData.randomInteger">{{liveData.randomInteger}}</div>
Is it possible to update the add/remove class functionality to utilize transclude and a template instead? I prefer not to mix jQuery into this implementation.
If anything is unclear, please don't hesitate to ask for clarification.