vcrudValidatedInputDirective.js

'use strict';

angular.module('vcrudValidatedInputDirective', [])
  .directive('validatedInput', function($tooltip, $interval) {
    return {
      restrict: 'A',
      scope:{
        feedbackType: '@',
        label:'@',
        formValidation:'@',
        tooltipMessage:'@'
      },
      link: function(scope, element, attrs){
        var inputElement = element;

        inputElement.wrap('<div class="form-group"></div>');
        var formGroup = inputElement.parent();


        inputElement.before('<label class="control-label"></label>');
        var formLabel = inputElement.prev();
        formLabel.attr('for',attrs.id);
        formLabel.html(scope.label);

        var myTooltip = $tooltip(inputElement, {
          title: scope.tooltipMessage,
          trigger: 'manual',
          animation: 'am-flip-x',
          delay: {
            show: 500,
            hide: 100
          }
        });

        function calculateFeedback(feedbackType){
          function removeAllFeedbackClasses(){
            formGroup.removeClass('has-feedback');
            formGroup.removeClass('has-success');
            formGroup.removeClass('has-warning');
            formGroup.removeClass('has-error');

            formGroup.find('.form-control-feedback').remove();
          }

          removeAllFeedbackClasses();

          if (feedbackType === 'SUCCESS'){
            formGroup.addClass('has-feedback');
            formGroup.addClass('has-success');

            inputElement.after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
          }else if (feedbackType === 'WARNING'){
            formGroup.addClass('has-feedback');
            formGroup.addClass('has-warning');

            inputElement.after('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>');
          }else if (feedbackType === 'ERROR'){
            formGroup.addClass('has-feedback');
            formGroup.addClass('has-error');

            inputElement.after('<span class="glyphicon glyphicon-remove form-control-feedback"></span>');

            myTooltip.$scope.$show();
            $interval(function() {
              myTooltip.$scope.$hide();
            },10000);
          }

        }

        calculateFeedback(scope.feedbackType);

        scope.internalControl = scope.formControl || {};
        scope.$on('validateFormEvent', function(event, msg) {
          if(scope.formValidation==='true'){
            calculateFeedback('SUCCESS');
          } else{
            calculateFeedback('ERROR');
          }
        });


      }
    };
  });