Simple console directive, revised using provider

Question

I recently created my first directive based on jQuery plugin and I asked for review here: Angular console like window - first directive

I've edited my directive so now instead of $rootScope it uses provider.
Below is my code:

(function() {
 'use strict';
 angular
 .module('misiu.providers', [])
 .provider('simpleConsole', function() {
 var events = [];
 var separator = '::'; //default
 //public methods
 this.$get = function() {
 return {
 addLog: function(data) {
 addEvent('log', 'Log' + separator + data);
 },
 addError: function(data) {
 addEvent('error', 'Error' + separator + data);
 },
 clear: function() {
 events.length = 0;
 },
 events: events
 };
 };
 //private method
 var addEvent = function(type, data) {
 if (events.length > 0 && events[0].type === type && events[0].data === data) {
 events[0].count++;
 } else {
 events.unshift({
 type: type,
 data: data,
 count: 1
 });
 }
 };
 //this is available only in config
 this.setSeparator = function(value) {
 separator = value;
 };
 });
 angular
 .module('misiu.directives', ['misiu.providers'])
 .directive('simpleConsole', ['simpleConsole', function(simpleConsole) {
 return {
 restrict: 'E',
 template: [
 '<div class="console animated">',
 '<div ng-repeat="event in events" ng-class="{\'error\': event.type == \'error\', \'log\': event.type == \'log\'}">',
 '{{event.data}}<span ng-if="event.count>1" class="count">{{event.count}}</span>',
 '</div>',
 '</div>'
 ].join(''),
 link: function($scope, element) {
 $scope.events = simpleConsole.events;
 }
 };
 }]);
})();

and Plunker to see results.

I'd like to ask for review. Especially that provider part, because I'm not sure if all functions in it are correctly declared - private methods should be private, setSeparator should be available only in config section and addLog,addError should be the only two public methods available inside controllers and directives.

Any other general tips are welcome.

• Pimgd: What's up with that comment //why events=[] is not working - does your code do what its supposed to do?
• Misiu: @Pimgd Yes, it does. This is just comment for me. I searched over the internet and used ` events.length = 0`. You can test my Plunker. I'll remove that comment if its confusing.

Answer 1

Just quick comments, as so far your code looks good

ng-class can receive an ng-model variable, the class being displayed matching the ng-model content, so you can directly state

 ng-class="{event.type}"

Maybe you want to extract the logic to check if the event exists to some functions with proper naming

 if (events.length > 0 && isFirstEvent(events, type, data)) {

Mine is probably not the best example but it will help to have an idea what's happening

Plus extracting the html of the directive to a template will help readability and maintainability

Hope it helps!

• Misiu: Thanks for comments. I didn't thought about using ng-model to set class of entry, silly me :) i didn't extract template because it is very simple and I wanted my directive to be single file + css, but I'll probably do that, to have everything as it should be.
• A. Romeu: I'd recommend having a folder where you place your directive in 3 different files: Javascript, html template, css That way components are easily identified on your project structure, it's easier to isolate them for tests and later reuse, and it will help in case in the future you want to use a preprocessor for either js, html or css, since you can decide to preprocessor only a few files