Angular 1.x Utilities

angular_utils.md

Angular 1.x Utilities

Moment Filter

app.filter('moment', function () {
  return function (input, momentFn) {
    var args = Array.prototype.slice.call(arguments, 2),
        obj = moment(input);
    return obj[momentFn].apply(obj, args);
  };
});

Usage:

{{client_registered | moment: 'format': 'DD/MM/YYYY hh:mm:ss a'}}

jQuery Datepicker Directive

app.directive('datepicker', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      $(function() {
        element.datepicker({
          dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true,
          minDate: new Date('1941-12-31'),
          maxDate: new Date((new Date().getFullYear() - 18).toString() + '-12-31'),
          yearRange: '1902:' + moment().format('Y'),
          onSelect: function(date) {
            ngModelCtrl.$setViewValue(date);
            scope.$apply();
          }
        });
      });
    }
  }
});

Datetimepicker Directive

app.directive('datetimepicker', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, attrs, ngModelCtrl) {
      $(function() {
        var format = attrs.datetimepickerFormat || 'DD/MM/YYYY HH:mm:ss';
        el.datetimepicker({
          locale: 'es',
          format: format,
          icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            next: "fa fa-chevron-right",
            previous: "fa fa-chevron-left"
          }
        }).on('dp.change', function(e) {
          ngModelCtrl.$setViewValue(e.date.format(format));
          scope.$apply();
        });
      });
    }
  }
});

Usage:

<div class="form-group">
  <div class="input-group date" name="txt-time" name="txt-time" 
    placeholder="Select your time" 
    ng-model="duration" datetimepicker datetimepicker-format="HH:mm:ss">
    
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <span class="fa fa-clock-o"></span>
    </span>

  </div>
</div>

jQuery Validation Directive

app.directive('formvalidation', function() {
  return {
    restrict: 'A',
    scope: {
      fn: '&formvalidationSubmit',
    },
    link: function(scope, el, attrs, ngModelCtrl) {
      $(function() {
        var method = attrs.formvalidationSubmit || null;

        el.validate({
          errorPlacement: function(error, element) {
            $(element).parent().append(error);
          },
          highlight: function(element, errorClass) {
            $(element).addClass(errorClass);
          },
          unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
          },
          submitHandler: function() {
            if (method) {
              scope.$apply(scope.fn.apply(this, arguments));
            }
          }
        });
      });
    }
  }
});

Usage:

<div class="container" ng-controller="AppCtrl as app">
  <form formvalidation formvalidation-submit="app.onSubmit()">
      <fieldset class="form-group">
        <input class="form-control" 
          id="txtfullname" name="txtfullname" placeholder="Fullname"
          ng-model="app.fullname"
          required
          data-msg-required="Enter your fullname">
      </fieldset>
  </form>
</div>

Fullcalendar Module

(function(ng) {
  ng
    .module('calendar')
    .factory('CalendarAPI', function() {
      var base = this;
      var avents = {};

      return {
        link: function(API) {
          base.el = API.el;
          base.scope = API.scope;
        },
        getElement: function() {
          return base.el;
        },
        getScope: function() {
          return base.scope;
        },
        setAPI: function(API) {
          base.API = API;
        },
        getAPI: function() {
          return base.API;
        },
        addEvent: function(type, fn) {
          avents[type] = fn;
        },
        delegateEvent: function(type, params) {
          if (avents[type]) {
            avents[type](params);
          }
        }
      };
    })
    .directive('calendar', function(CalendarAPI) {
      return {
        restrict: 'A',
        link: function($scope, el) {
          $scope.el = el;
          CalendarAPI.link({
            el: el,
            scope: $scope
          });

          $(function() {
            el.fullCalendar({
              header: {
                left: '',
                center: 'title',
                right: 'today,prev,next'
              },
              editable: true,
              eventLimit: true,
              viewRender: function(currentView) {
                var minDate = moment();

                // Past
                if (minDate >= currentView.start && minDate <= currentView.end) {
                  $(".fc-prev-button").prop('disabled', true);
                  $(".fc-prev-button").addClass('fc-state-disabled');
                } else {
                  $(".fc-prev-button").removeClass('fc-state-disabled');
                  $(".fc-prev-button").prop('disabled', false);
                }
              },
              eventDrop: function(date) {
                CalendarAPI.delegateEvent('drop', date);
              },
              eventRender: function(event, element) {
                var close = $('<i class="fa fa-times"></i>');
                close.off('click').on('click', function() {
                  CalendarAPI.delegateEvent('remove', event);
                });
                element.append(close);
              }
            });
          });
        },
        controller: function($scope) {
          var el;
          var api = {};
          var avents = {};

          api.loadEventData = function(list) {
            el = $scope.el;
            el.fullCalendar('render');
            el.fullCalendar('removeEvents');
            el.fullCalendar('addEventSource', list);

          };

          api.addEventData = function(one) {
            el = $scope.el;
            el.fullCalendar('renderEvent', one);
          };

          CalendarAPI.setAPI(api);
        }
      }
    });
})(window.angular);

Usage:

angular
  .module('MyModule', [
    'app.calendar'
  ])
  .controller('MyCtrl', function(CalendarAPI) {
    
    // On Drop event
    CalendarAPI.addEvent('drop', function(data) {
      console.log(data);
    });

    // On Remove event
    CalendarAPI.addEvent('remove', function(data) {
      console.log(data);
    });

    // Load events data
    var api = CalendarAPI.getAPI();
    api.addEventData(data)
  });

<div calendar></div>

Toma tu Like 👍