Skip to main content
replaced http://codereview.stackexchange.com/ with https://codereview.stackexchange.com/
Source Link

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

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

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

edited tags; edited title
Link
200_success
  • 144.2k
  • 22
  • 188
  • 473

My first Simple console directive, revised using provider

removed confusing comment
Source Link
Misiu
  • 349
  • 1
  • 5
  • 15
(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;//why events=[] is not working
          },
          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;
        }
      };
    }]);
})();
(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;//why events=[] is not working
          },
          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;
        }
      };
    }]);
})();
(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;
        }
      };
    }]);
})();
added clear method
Source Link
Misiu
  • 349
  • 1
  • 5
  • 15
Loading
Source Link
Misiu
  • 349
  • 1
  • 5
  • 15
Loading